Quill编辑器在Safari浏览器中的一个坑

最近使用 Quill 时在Safari下遇到一个坑，内容输入后，在某些浏览器版本无法删除。这个坑有2个”特色“：

第一：打开调试面板后，该问题自动消失

这让调试起来非常困难，只能通过把日志信息写入到DOM中进行调试。还有一种手段，观察有问题和无问题的DOM结构，找出差异点。

第二：使用React来渲染编辑器，该问题也不会存在

我有一个编辑器demo使用的是React，使用了Quill最新的SDK，在这个项目中，该问题并不存在。这给我的感觉是出问题的项目是因为采用的Quill版本比较低，Quill在最新的代码中已经修改了该问题。

我开始查看官方的提交记录，未发现任何关于该问题的修复痕迹。最后索性把出问题的项目替换成最新SDK，替换完后发现该问题仍然存在。

目前发现唯一的不同点是，出问题的项目使用的Vue，而没问题的项目使用的 React，最后把 React 替换成 Vue，问题出现了。

那么，到此确定React的某些机制会影响该问题的出现。

总之，Quill目前的SDK中仍然会存在该问题，那么该如何修复？

通过对比DOM的结构，发现在有问题的DOM结构中有异常，导致编辑器的数据也不对。Quill官方文档有说明过，DOM与Delta数据是一一对应的，可相互转换。但是目前并没有，说明问题出在了 DOM与Delta数据相互转换时出问题了。

有问题的DOM：

<p>我是文本<br></p>

无问题的DOM：

<p><span>我是文本</span></p>

不难看出，解决该问题的核心思路是把有问题的DOM结构转换成无问题的DOM结果即可。

这个问题的本质原因是 contenteditable 在不同浏览器中实现的方式不一，也是编辑器实现中最坑的地方。

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/