摘要：问题必须得解决，否则就又要换编辑器了。该函数内有这么一行计算的实际高度，然后拿下一个兄弟元素的与进行比较，如果前者比后者大，则插入一个换行。希望有其他看法或者解决方案的朋友可以留言说一下
问题描述：
在使用 vue-quill-editor 富文本编辑器过程中，加载已有的富文本数据到编辑器，经常会出现编辑器中莫名其妙多出一段换行内容（一般出现在段落与其他内容之间，例如标题，引用，列表），每次重新编辑之前的内容时都必须手动删除这些空行，否则这些换行就会越积越多。这让我们的文案小伙伴很不开心。
问题必须得解决，否则就又要换编辑器了。
先尝试直接使用 DOM 设置 innerHtml 进行设置原始内容，发现没有成功（在浏览器控制台可以成功，但是代码中无法设置，原因不明，猜测编辑器内部做了保护）。
然后看了一下 vue-quill-editor 中代码，发现很简单，它在 init 组件的时候调用了 quill 的pasteHTML方法。
// Set editor content
if (this.value || this.content) {
this.quill.pasteHTML(this.value || this.content)
}
开始翻 quill 的源代码，搜索 pasteHTML，发现该方法（将被弃用）调用了dangerouslyPasteHTML方法。该方法里有这么一行是设置内容的：
this.quill.setContents(this.convert(index), html);
打印 convert函数的结果，发现返回的是 delta 对象。发现在多出换行的那个位置多出了一些" "字符，在控制台里显示这样↵↵。
convert函数调用的是traverse函数，该函数把 node 转化成了 delta对象 。
traverse函数中使用一系列的Matchers进行内容匹配，其中最让我关注的两个Matcher函数是matchNewline和matchSpacing，因为只有这两个函数执行了delta.insert("
");，在插入
的这两个地方进行测试输出，发现主要问题在matchSpacing。该函数内有这么一行：
var nodeHeight = node.offsetHeight + parseFloat(computeStyle(node).marginTop) + parseFloat(computeStyle(node).marginBottom);
if (node.nextElementSibling.offsetTop > node.offsetTop + nodeHeight * 1.5) {
delta.insert("
");
}
计算 node 的实际高度 nodeHeight，然后拿下一个兄弟元素的 offsetTop 与 node.offsetTop + nodeHeight * 1.5进行比较，如果前者比后者大，则插入一个换行。（不是很清楚这么做的目的，有想法的朋友可以留言说一下~），我们打印一下这三个值，发现系数1.5有点小，后来我改成了2，基本就不会有这种问题出现了。
也就是说，我目前的解决办法是把 quill.js 里系数1.5改成了2.....
ps:打印出 margin 的值，发现结果都是 0，设置 padding、line-height 也对这三个数据没有任何影响。
希望有其他看法或者解决方案的朋友可以留言说一下.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/94229.html
摘要：优秀的富文本编辑器有很多，比如，等，但并不是每个都能在移动端有很好的表现。是百度的老牌富文本编辑器，但界面有一股上世纪的感觉，官网最新的一条动态停留在。优秀的富文本编辑器有很多，比如：UEditor，wangEditor 等，但并不是每个都能在移动端有很好的表现。 我们暂且不讨论移动端是否真的需要富文本，既然有这需求，就把它实现出来。 失败的尝试 正确的选择是成功的开始，开发之前肯定要做一些...
摘要：我们通常都会使用富文本编辑器在后台编辑内容，开发当然也少不了，我们通过官网的链接可以找到一些资源，或者去上查找一些开源的编辑器。 我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默...
摘要：我们通常都会使用富文本编辑器在后台编辑内容，开发当然也少不了，我们通过官网的链接可以找到一些资源，或者去上查找一些开源的编辑器。 我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默...
阅读 1626·2021-11-24 09:39
阅读 3028·2021-11-22 15:24
阅读 3068·2021-10-26 09:51
阅读 3254·2021-10-19 11:46
阅读 2873·2019-08-30 15:44
阅读 2192·2019-08-29 15:30
阅读 2521·2019-08-29 15:05
阅读 753·2019-08-29 10:55
