元素可编辑 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();