富文本編輯器小結(jié)

ZHAO_ 發(fā)布于2019-08-20 12:06 / 1523人閱讀

摘要：自己寫一個(gè)富文本編輯器。無處不在的坑首先端的富文本編輯器，基本命令參照命令文檔，兼容性的問題就不說了，大家都知道，主要說說一些開發(fā)了才能知道的坑。

近況

最近由于公司業(yè)務(wù)上的需求，我們需要一個(gè)自己的編輯器來編寫我們得到APP里面的訂閱文章，為什么需要自己的編輯器，主要是因?yàn)橛玫谌降木庉嬈骱茈y完成公司定制化的需求，比如：排版上我們想要更好看點(diǎn)，統(tǒng)一，因?yàn)楦鱾€(gè)訂閱專欄編輯的人不一樣，容易造成各種不同的審美差異，解決方案有2種：

采用一個(gè)可定制化的第三方富文本編輯器，然后自己寫插件來滿足自己的要求。

自己寫一個(gè)富文本編輯器。

最后和團(tuán)隊(duì)的人商量決定，自己擼一個(gè)吧，因?yàn)槭褂玫谝环N方案，依賴于別人的開源插件，總是不太放心，而且害怕到時(shí)候有什么問題，要研究他們的源碼，那就跟自己寫差不多多少，而且我們自己擼一個(gè)，并非要寫一個(gè)非常通用，可以開源的富文本編輯器，我們只需要針對(duì)我們自己業(yè)務(wù)，寫一個(gè)定制化符合公司使用的編輯器就行了。綜上，我開始了這次非常愉快（坑爹）的編輯器之旅！！！

先看效果圖，如圖所示，如果有訂閱了我們得到APP里面專欄文章的，可以對(duì)比下，現(xiàn)在和8月的文章就能看出來了。

無處不在的坑

首先web端的富文本編輯器，基本命令參照documen命令文檔，兼容性的問題就不說了，大家都知道，主要說說一些開發(fā)了才能知道的坑。

div還是p

可編輯模式下（是否支持可編輯可以用[HTMLElement.isContentEditable
](https://developer.mozilla.org... 命令來查看的），如果內(nèi)部沒有P標(biāo)簽這個(gè)初始化標(biāo)簽，編寫的時(shí)候，換行給你添加的標(biāo)簽將會(huì)是div，如圖所示：

這里就已經(jīng)不太符合我們要求了，不想要各種div標(biāo)簽在文本外面，語義化來說，我們應(yīng)該用p標(biāo)簽才對(duì)。

解決方案：初始化添加一個(gè)p標(biāo)簽，并且里面加入一個(gè)br

刪除也要小心翼翼

這個(gè)坑跟第一個(gè)同樣的原因，只是表現(xiàn)形式不同，如果你開始刪除你的編輯文本，刪除完之后，整個(gè)可編輯元素，就變成空了，意味著，又沒有初始化的p標(biāo)簽，那么你在添加文字的時(shí)候，就會(huì)跟上面的問題一樣了。

解決方案：監(jiān)聽刪除動(dòng)作，判斷內(nèi)部還是否有子元素，沒有初始化p標(biāo)簽

行內(nèi)標(biāo)簽很有個(gè)性

添加文本需要的行內(nèi)標(biāo)簽，例如： bold，italic，underline，subscript等等，可以任意添加和取消，一般來說沒有任何問題，需要注意的是，你不能隨意更改相關(guān)標(biāo)簽的css特殊樣式，炒個(gè)栗子：bold在chrome里面添加一個(gè)b標(biāo)簽，瀏覽器樣式，font-weight：bolder;，如果你自己css給覆蓋掉，變成 font-weight: normal;，那么再次點(diǎn)擊，應(yīng)該取消的時(shí)候，不會(huì)成功的。原因我沒有找到文檔，據(jù)我推測，因?yàn)槭侨∠臅r(shí)候，判斷條件為是否有相關(guān)命令的css樣式，并不是單純的文字外部標(biāo)簽名稱。

formatBlock跟你說，不是所有的牛奶都是特侖蘇！

使用formatBlock來添加或者更換文字的外標(biāo)簽時(shí)，要特別注意--BLOCKQUOTE這個(gè)東東,
document.execCommand("formatBlock", false, "

")，它能添加或者更換，但是要取消他的時(shí)候，就不起作用了。

解決方案：在執(zhí)行代碼的時(shí)候，多加一個(gè)判斷，判斷當(dāng)前選中文字的外標(biāo)簽是什么，再?zèng)Q定是需要執(zhí)行什么命令。
let Range = document.getSelection().getRangeAt(0),
     formatName = Range.commonAncestorContainer.parentElement.nodeName === "BLOCKQUOTE" ? "P" : "BLOCKQUOTE";
document.execCommand("formatBlock", false, formatName)
removeFormat并不是萬能的
清楚格式這個(gè)命令，主要會(huì)清除掉附帶在標(biāo)簽上的內(nèi)聯(lián)樣式，也就是style，但是不會(huì)清除class名稱，這意味著，從外部粘貼過來的文本，如果不幸的ClassName和你的css里面的ClassName重復(fù)了，就會(huì)帶上你的css樣式。而且也不會(huì)清楚里面內(nèi)聯(lián)元素標(biāo)簽，什么意思呢？就是span都還是存在的，從原理上來說這個(gè)不影響最后的顯示，但沒有必要需要這些個(gè)標(biāo)簽，很容易產(chǎn)生其他的問題。

解決方案：執(zhí)行清楚格式操作的時(shí)候，多加一些操作，把無用的樣式，標(biāo)簽和ClassName全部干掉。（此處必須有殺氣！）
其他
至于其他的很多命令（indent，fontSize，fontColor...），我這里沒有使用，也不知道是否有坑，原因是前面說到的樣式統(tǒng)一，保證美觀，不支持內(nèi)聯(lián)樣式，由統(tǒng)一的css樣式渲染。