資訊專欄INFORMATION COLUMN
摘要：問題必須得解決，否則就又要換編輯器了。該函數內有這么一行計算的實際高度，然后拿下一個兄弟元素的與進行比較，如果前者比后者大，則插入一個換行。希望有其他看法或者解決方案的朋友可以留言說一下
問題描述：
在使用 vue-quill-editor 富文本編輯器過程中，加載已有的富文本數據到編輯器，經常會出現編輯器中莫名其妙多出一段換行內容（一般出現在段落與其他內容之間，例如標題，引用，列表），每次重新編輯之前的內容時都必須手動刪除這些空行，否則這些換行就會越積越多。這讓我們的文案小伙伴很不開心。
問題必須得解決，否則就又要換編輯器了。
先嘗試直接使用 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 對象。發現在多出換行的那個位置多出了一些" "字符，在控制臺里顯示這樣??。
convert函數調用的是traverse函數，該函數把 node 轉化成了 delta對象 。
traverse函數中使用一系列的Matchers進行內容匹配，其中最讓我關注的兩個Matcher函數是matchNewline和matchSpacing，因為只有這兩個函數執行了delta.insert("
");，在插入
的這兩個地方進行測試輸出，發現主要問題在matchSpacing。該函數內有這么一行：
var nodeHeight = node.offsetHeight + parseFloat(computeStyle(node).marginTop) + parseFloat(computeStyle(node).marginBottom);
if (node.nextElementSibling.offsetTop > node.offsetTop + nodeHeight * 1.5) {
delta.insert("
");
}
計算 node 的實際高度 nodeHeight，然后拿下一個兄弟元素的 offsetTop 與 node.offsetTop + nodeHeight * 1.5進行比較，如果前者比后者大，則插入一個換行。（不是很清楚這么做的目的，有想法的朋友可以留言說一下~），我們打印一下這三個值，發現系數1.5有點小，后來我改成了2，基本就不會有這種問題出現了。
也就是說，我目前的解決辦法是把 quill.js 里系數1.5改成了2.....
ps:打印出 margin 的值，發現結果都是 0，設置 padding、line-height 也對這三個數據沒有任何影響。
希望有其他看法或者解決方案的朋友可以留言說一下.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94229.html
摘要：優秀的富文本編輯器有很多，比如，等，但并不是每個都能在移動端有很好的表現。是百度的老牌富文本編輯器，但界面有一股上世紀的感覺，官網最新的一條動態停留在。優秀的富文本編輯器有很多，比如：UEditor，wangEditor 等，但并不是每個都能在移動端有很好的表現。 我們暫且不討論移動端是否真的需要富文本，既然有這需求，就把它實現出來。 失敗的嘗試 正確的選擇是成功的開始，開發之前肯定要做一些...
摘要：我們通常都會使用富文本編輯器在后臺編輯內容，開發當然也少不了，我們通過官網的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。 我們通常都會使用富文本編輯器在后臺編輯內容，開發vue當然也少不了，我們通過vue官網的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。我使用的是vue-quill-editor，它的界面很簡潔，功能也滿足平時的編輯需要，不過于臃腫，但是它默...
摘要：我們通常都會使用富文本編輯器在后臺編輯內容，開發當然也少不了，我們通過官網的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。 我們通常都會使用富文本編輯器在后臺編輯內容，開發vue當然也少不了，我們通過vue官網的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。我使用的是vue-quill-editor，它的界面很簡潔，功能也滿足平時的編輯需要，不過于臃腫，但是它默...
閱讀 1702·2021-11-24 09:39
閱讀 3168·2021-11-22 15:24
閱讀 3106·2021-10-26 09:51
閱讀 3296·2021-10-19 11:46
閱讀 2907·2019-08-30 15:44
閱讀 2229·2019-08-29 15:30
閱讀 2549·2019-08-29 15:05
閱讀 791·2019-08-29 10:55
