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