contenteditable：控制元素可以像富文本编辑器一样编辑


  This text can be edited by the user.

当一个HTML元素的contenteditable属性被设置为true时，"document.execCommand()”方法便可使用。通过该方法，你可以运行相关commands 来操作可编辑区域的内容。

需要注意一点，不同的浏览器对换行有不同的处理，但是我们可以指定默认的换行行为(Firefox 插入
、IE/Opera将使用

、 Chrome/Safari 将使用

）：
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();