記一次解決 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 也對這三個數據沒有任何影響。

但願有其餘見解或者解決方案的朋友能夠留言說一下.