元素可編輯 Content Editable

contenteditable：控制元素能夠像富文本編輯器同樣編輯

<div contenteditable="true">
  This text can be edited by the user.
</div>

當一個HTML元素的contenteditable屬性被設置爲true時，"document.execCommand()」方法即可使用。經過該方法，你能夠運行相關commands 來操做可編輯區域的內容。

須要注意一點，不一樣的瀏覽器對換行有不一樣的處理，可是咱們能夠指定默認的換行行爲(Firefox 插入<br>、IE/Opera將使用<p>、 Chrome/Safari 將使用 <div>）：
document.execCommand("defaultParagraphSeparator", false, "p");

通常使用contenteditable還會使用下面三個方法：
document.createTextNode、document.createRange、window.getSelection

document.createTextNode
建立一個純文本節點document.createTextNode(data: string)，繼承於Node接口。

document.createRange
建立一個Range(接口表示一個包含節點與文本節點的一部分的文檔片斷)，其中Range.getBoundingClientRect()/Element.getBoundingClientRect() 這個方法是新加的比較有用的方法(用於得到頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置)。

window.getSelection
Selection 對象表示用戶選擇的文本範圍或插入符號的當前位置，它表明頁面中的文本選區，可能橫跨多個元素，，文本選區由用戶拖拽鼠標通過文字而產生，通常來講，插入光標的位置可經過 Selection 獲取，這時它被標記爲 Collapsed，這表示選區被壓縮至一點，即光標位置。
用戶可能從左到右（與文檔方向相同）選擇文本或從右到左（與文檔方向相反）選擇文本。anchor 指向用戶開始選擇的地方，而 focus 指向用戶結束選擇的地方。若是你使用鼠標選擇文本的話，anchor 就指向你按下鼠標鍵的地方，而 focus 就指向你鬆開鼠標鍵的地方。
Selection 對象所對應的是用戶所選擇的 ranges （區域），俗稱拖藍。

var selObj = window.getSelection();
var range  = selObj.getRangeAt(0);

selObj.addRange(Range);//document.createRange建立的range
selObj.removeRange(Range);
selObj.removeAllRange();