【干货】富文本编辑器核心操作(contenteditable，window.getSelection()，FileReader与blob图像资源处理)

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);
		}
	})