问题描述:
在使用 vue-quill-editor 富文本编辑器过程中,加载已有的富文本数据到编辑器,经常会出现编辑器中莫名其妙多出一段换行内容
<p><br></p>
(一般出现在段落与其他内容之间,例如标题,引用,列表),每次重新编辑之前的内容时都必须手动删除这些空行,否则这些换行就会越积越多。这让我们的文案小伙伴很不开心。
问题必须得解决,否则就又要换编辑器了。
先尝试直接使用 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 对象。发现在多出换行的那个位置多出了一些'\n'
字符,在控制台里显示这样↵↵
。
convert
函数调用的是traverse
函数,该函数把 node
转化成了 delta
对象 。traverse
函数中使用一系列的Matchers
进行内容匹配,其中最让我关注的两个Matcher
函数是matchNewline
和matchSpacing
,因为只有这两个函数执行了delta.insert('\n');
,在插入\n
的这两个地方进行测试输出,发现主要问题在matchSpacing
。该函数内有这么一行:
var nodeHeight = node.offsetHeight + parseFloat(computeStyle(node).marginTop) + parseFloat(computeStyle(node).marginBottom);
if (node.nextElementSibling.offsetTop > node.offsetTop + nodeHeight * 1.5) {
delta.insert('\n');
}
计算 node
的实际高度 nodeHeight
,然后拿下一个兄弟元素的 offsetTop
与 node.offsetTop + nodeHeight * 1.5
进行比较,如果前者比后者大,则插入一个换行。(不是很清楚这么做的目的,有想法的朋友可以留言说一下~),我们打印一下这三个值,发现系数1.5有点小,后来我改成了2,基本就不会有这种问题出现了。
也就是说,我目前的解决办法是把 quill.js 里系数1.5
改成了2
…..
ps:打印出 margin
的值,发现结果都是 0,设置 padding
、line-height
也对这三个数据没有任何影响。
希望有其他看法或者解决方案的朋友可以留言说一下.