contenteditable 踩坑记

关于富文本编辑器

知乎上有个问题为什么都说富文本编辑器是天坑？,很早就听说了实现一个富文本编辑器需要填很多的坑，“有幸”接触到富文本编辑器，记录下遇到的一些问题及解决方案.

富文本编辑器的实现一般有两种：

通过设置contenteditable属性，使得在HTML中的任何元素都可以编辑，加上使用一些JavaScript事件处理逻辑，可以将你的网页转换为完整且快速的富文本编辑器。
基于Draft.js实现编辑器功能，Draft.js是Facebook开源的开发React富文本编辑器开发框架。而使用contenteditable无疑是最简单的一种方式，但是 DOM 的处理存在很多兼容性的问题，并且处理起来异常麻烦，😢详情查看为什么说contenteditable很糟糕，而这里主要记录使用contenteditable属性实现一个简单编辑器过程的一些坑。

之所以不直接使用input、textarea，是因为考虑到实现以下功能contenteditable更具有优势：

输入框的高度无限制，并且自适应
对一些特定文本进行样式高亮调整等自定义工具栏
指定位置插入图片、表情等内容
所见即所得（What you see is what you get）

伴随而来的就是一堆需要解决的问题(这只是其中的很小的一部分...)：

placeholder提示语
获取输入框的内容
光标位置
使用delete缩进时，插入多余的dom节点

placeholder提示语

input和textarea能轻松实现placeholder提示语的效果，但作用于contenteditable的元素，placeholder不起作用，可以通过css的:empty解决：

css
1[contenteditable=true]:empty::before {
2  content: attr(placeholder);
3}

获取输入框的内容

可以利用innerHTML、innerText、textContent获取输入框的内容，详细对比介绍一下这几个方法：

innerHTML 返回或修改标签之间的内容，包括标签和文本信息，基本上所有浏览器都支持。

innerText 打印标签之间的纯文本信息，会将标签过滤掉,此功能最初由Internet Explorer引入，在Firefox上存在兼容问题。

innerText !== textContent

innerText和textContent均能获取标签的内容，但二者存在差别，使用的时候还需注意浏览器兼容性：

textContent会获取style元素里的文本（若有script元素也是这样），而innerText不会
textContent会保留空行、空格与换行符
innerText并不是标准，而textContent更早被纳入标准中
innerText会忽略display: none标签内的内容，textContent则不会
性能上textContent > innerText

具体查看下面的例子:

CodePen 地址: https://codepen.io/amnEs1a/pen/ajmYXo

光标的位置

首先遇到的一个问题是利用上述方法实现placeholder后，输入框的光标在Firefox中的位置会比其它浏览器要高一截。
图片例子来自medium-editor: 请在friefox浏览器下查看这个bughttps://jsfiddle.net/wooLksnx/

尝试了很多方法来解决均无果，最终发现默认放置 <\br> 标签后，光标位置正常了。

html
1<div class="rich-editor" data-placeholder="Placeholder Text"><br></div>

而我的另一个需求是需要准确地在光标位置的后面插入指定的内容，获取光标位置，然后插入内容。

JavaScript
1// getSelection、createRange兼容
2export function isSupportRange () {
3  return typeof document.createRange === 'function' || typeof window.getSelection === 'function'
4}
5
6// 获取光标位置
7export function getCurrentRange () {
8  let range = null
9  let selection = null
10  if (isSupportRange()) {
11    selection = document.getSelection()
12    if (selection.getRangeAt && selection.rangeCount) {
13      range = document.getSelection().getRangeAt(0)
14    }
15  } else {
16    range = document.selection.createRange()
17  }
18  return range
19}

JavaScript
1// 插入内容
2export function insertHtmlAfterRange (html) {
3  let selection = null
4  let range = null
5  if (isSupportRange()) {
6    // IE > 9 and 其它浏览器
7    selection = document.getSelection()
8    if (selection.getRangeAt && selection.rangeCount) {
9      let fragment, node, lastNode
10      range = selection.getRangeAt(0)
11      range.deleteContents()
12      let el = document.createElement('span')
13      el.innerHTML = html
14      // 创建空文档对象,IE > 8支持documentFragment
15      fragment = document.createDocumentFragment()
16
17      while ((node = el.firstChild)) {
18        lastNode = fragment.appendChild(node)
19      }
20      range.insertNode(fragment)
21    
22      if (lastNode) {
23        range = range.cloneRange()
24        range.setStartAfter(lastNode)
25        range.collapse(true)
26        selection.removeAllRanges()
27        selection.addRange(range)
28      }
29    }
30  } else if (document.selection && document.selection.type != 'Control') {
31    // IE < 9
32    document.selection.createRange().pasteHTML(html)
33  }
34}
35

使用delete缩进时，Chrome插入多余的dom节点

发现的另一个bug是在编辑器进行删除缩进操作时，浏览器会在dom节点中插入节点。

例如：

HTML
1<div contenteditable="true">
2  <div>这是第一行的内容</div>
3  <div>这是第二行的内容</div>
4</div>

当年使用delete进行缩进成一行时，其它浏览器正常显示：

HTML
1<div contenteditable="true">
2  <div>这是第一行的内容这是第二行的内容</div>
3</div>

而Chrome会插入span标签，并且带上继承的一些style属性，font-family, font-size, line-height等：

HTML
1<div contenteditable="true">
2  <div>这是第一行的内容<span style="line-height: 1.5em">这是第二行的内容<span></div>
3</div>

解决方案是使用方法动态移除这些多余的标签，如http://jsfiddle.net/THPmr/6/。

参考的一些资料：

几款不错的开源富文本编辑器：

以上。

关于富文本编辑器
placeholder提示语
获取输入框的内容
innerText !== textContent
光标的位置
使用delete缩进时，Chrome插入多余的dom节点