問題描述：

在使用 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 也對這三個數據沒有任何影響。

希望有其他看法或者解決方案的朋友可以留言說一下.

總結

以上是生活随笔為你收集整理的记一次解决 quill（vue-quill-editor） 编辑器中莫名多出一行“pbr/p”的过程...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。