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