编辑器涉及到不得不了解的概念

1、getSelection

• 是当前激活选中区（即高亮文本）；
• 在非IE浏览器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection()获得selection对象，

1.1、getSelection相关属性：anchorNode、baseNode、extentNode、focusNode

有些比较老的浏览器可能没有baseNode和extentNode

anchor
选中区域的“起点”。
focus
选中区域的“结束点”。
range
是一种fragment(HTML片断)，它包含了节点或文本节点的一部分。一般情况下，同一时刻页面中只可能有一个range，也有可能是多个range（使用Ctrl健进行多选，不过有的浏览器不允许，例如Chrome）。可以从selection中获得range对象，也可以使用document.createRange()方法获得。

属性

• anchorNode 返回包含“起点”的节点
• anchorOffset “起点”在anchorNode中的偏移量
• focusNode 返回包含“结束点”的节点。
• focusOffset “结束点”在focusNode中的偏移量。
• isCollapsed “起点”和“结束点”是否重合。
• rangeCount
  返回selection中包含的range对象的数目，一般存在一个range，Ctrl健配合使用可以有多个，一般浏览器都是一个，唯独 firefox 可以多个

通过实例来理解这几个属性吧

0.png

1.png

2.png

3.png

4.png

https://stackoverflow.com/questions/32227149/changing-caret-color-in-contenteditable-div