問題描述：

在使用 vue-quill-editor 富文本編輯器過程中，加載已有的富文本數(shù)據(jù)到編輯器，經(jīng)常會(huì)出現(xiàn)編輯器中莫名其妙多出一段換行內(nèi)容 <p><br></p>（一般出現(xiàn)在段落與其他內(nèi)容之間，例如標(biāo)題，引用，列表），每次重新編輯之前的內(nèi)容時(shí)都必須手動(dòng)刪除這些空行，否則這些換行就會(huì)越積越多。這讓我們的文案小伙伴很不開心。

問題必須得解決，否則就又要換編輯器了。
先嘗試直接使用 DOM 設(shè)置 innerHtml 進(jìn)行設(shè)置原始內(nèi)容，發(fā)現(xiàn)沒有成功（在瀏覽器控制臺(tái)可以成功，但是代碼中無法設(shè)置，原因不明，猜測編輯器內(nèi)部做了保護(hù)）。

然后看了一下 vue-quill-editor 中代碼，發(fā)現(xiàn)很簡單，它在 init 組件的時(shí)候調(diào)用了 quill 的pasteHTML方法。

// Set editor content if (this.value || this.content) {this.quill.pasteHTML(this.value || this.content) }

開始翻 quill 的源代碼，搜索 pasteHTML，發(fā)現(xiàn)該方法（將被棄用）調(diào)用了dangerouslyPasteHTML方法。該方法里有這么一行是設(shè)置內(nèi)容的：

this.quill.setContents(this.convert(index), html);

打印 convert函數(shù)的結(jié)果，發(fā)現(xiàn)返回的是 delta 對象。發(fā)現(xiàn)在多出換行的那個(gè)位置多出了一些'\n'字符，在控制臺(tái)里顯示這樣??。

convert函數(shù)調(diào)用的是traverse函數(shù)，該函數(shù)把 node 轉(zhuǎn)化成了 delta對象 。
traverse函數(shù)中使用一系列的Matchers進(jìn)行內(nèi)容匹配，其中最讓我關(guān)注的兩個(gè)Matcher函數(shù)是matchNewline和matchSpacing，因?yàn)橹挥羞@兩個(gè)函數(shù)執(zhí)行了delta.insert('\n');，在插入\n的這兩個(gè)地方進(jìn)行測試輸出，發(fā)現(xiàn)主要問題在matchSpacing。該函數(shù)內(nèi)有這么一行：

var nodeHeight = node.offsetHeight + parseFloat(computeStyle(node).marginTop) + parseFloat(computeStyle(node).marginBottom); if (node.nextElementSibling.offsetTop > node.offsetTop + nodeHeight * 1.5) {delta.insert('\n'); }

計(jì)算 node 的實(shí)際高度 nodeHeight，然后拿下一個(gè)兄弟元素的 offsetTop 與 node.offsetTop + nodeHeight * 1.5進(jìn)行比較，如果前者比后者大，則插入一個(gè)換行。（不是很清楚這么做的目的，有想法的朋友可以留言說一下~），我們打印一下這三個(gè)值，發(fā)現(xiàn)系數(shù)1.5有點(diǎn)小，后來我改成了2，基本就不會(huì)有這種問題出現(xiàn)了。

也就是說，我目前的解決辦法是把 quill.js 里系數(shù)1.5改成了2.....

ps:打印出 margin 的值，發(fā)現(xiàn)結(jié)果都是 0，設(shè)置 padding、line-height 也對這三個(gè)數(shù)據(jù)沒有任何影響。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。