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图像资源处理:
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);
}
})