记一次解决 quill（vue-quill-editor） 编辑器中莫名多出一行“ ”的过程

问题描述：

在使用 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 也对这三个数据没有任何影响。

但愿有其余见解或者解决方案的朋友能够留言说一下.