1、内容编辑
contenteditable做前端的基本都知道,让div可写,但问起有那些属性值时,很多人会天真的以为只有“true ”or“ false”
contenteditable="" contenteditable="events" contenteditable="caret" contenteditable="plaintext-only" contenteditable="true" contenteditable="false" <div contenteditable="true">给div加上contenteditable="true"属性,使得div里面的内容可被编辑</div>
重点关注"plaintext-only":故名思意,纯文本,复制粘贴不带样式。
对比“true”
例如用的富文本编辑器是“true”属性,粘贴时会附带样式。
2、这段代码简单易懂,直接粘贴在控制台输出可用,绝非网上老版本的复制粘贴。
function insertHtml(html) { var sel,range,div,node sel = window.getSelection()//返回一个Selection对象,用来表示用户选择的文本范围或插入符当前位置。 range = sel.getRangeAt(0) //获取Range,参数为0或其他能够==0,如false,'',null div=document.createElement('div') div.innerHTML=html node=div.firstChild range.deleteContents()//删除目前range的内容 range.insertNode(node)//新增的节点内容 range.setStartAfter(node)//重新定位range(光标位置) sel.removeAllRanges() //清除所有选中 sel.addRange(range) //将新定位的range加入 }
range.insertNode(node)增添的必须是node对象,注意一个细节:
在谷歌控制台输出,黑色字符串表示node节点元素(都会缩进一级),红色字符串才真正表示字符。
将选中的内容字符串输出:window.getSelection().toString():
没选中则返回“”
3、FileReader与blob图像资源处理:
4、FileReader/Canvas两种方法读取base64:
edit.addEventListener('paste', function(e){ blob=e.clipboardData.items[0].getAsFile(); blobUrl=window.URL.createObjectURL(blob) // console.log(blobUrl); var new_img= document.createElement('img'); new_img.setAttribute('src', blobUrl); // 两种读法获取base64 // FileReader var fs =new FileReader() fs.onload=function(e){ // console.log(e); new_img.setAttribute('src', e.target.result); edit.appendChild(new_img); } fs.readAsDataURL(blob.slice()) edit.appendChild(new_img); // Canvas document.getElementsByTagName('body')[0].appendChild(new_img); // document.getElementsByTagName('body')[0].appendChild(new_img_intro); a=document.querySelector('img') a.onload=function(){ c=document.createElement('canvas') c.setAttribute('width',a.width); c.setAttribute('height',a.height); c.getContext('2d').drawImage(a,0,0) console.log(c.toDataURL()); edit.appendChild(c); } })