元素可編輯 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() 這個方法是新加的比較有用的方法(用於獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置)。