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

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

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

近況

最近由于公司業(yè)務上的需求，我們需要一個自己的編輯器來編寫我們得到APP里面的訂閱文章，為什么需要自己的編輯器，主要是因為用第三方的編輯器很難完成公司定制化的需求，比如：排版上我們想要更好看點，統(tǒng)一，因為各個訂閱專欄編輯的人不一樣，容易造成各種不同的審美差異，解決方案有2種：

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

自己寫一個富文本編輯器。

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

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

無處不在的坑

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

div還是p

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

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

解決方案：初始化添加一個p標簽，并且里面加入一個br

刪除也要小心翼翼

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

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

行內(nèi)標簽很有個性

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

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

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

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

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

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

云服務器 GPU云服務器富文本編輯器富文本web編輯器富文本百度富文本

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80793.html

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

摘要：自己寫一個富文本編輯器。無處不在的坑首先端的富文本編輯器，基本命令參照命令文檔，兼容性的問題就不說了，大家都知道，主要說說一些開發(fā)了才能知道的坑。近況最近由于公司業(yè)務上的需求，我們需要一個自己的編輯器來編寫我們得到APP里面的訂閱文章，為什么需要自己的編輯器，主要是因為用第三方的編輯器很難完成公司定制化的需求，比如：排版上我們想要更好看點，統(tǒng)一，因為各個訂閱專欄編輯的人不一樣，容易...

CatalpaFlat 2019-08-01 15:54 評論0 收藏0
如何設計高擴展的在線網(wǎng)頁制作平臺

摘要：如何設計高擴展的在線網(wǎng)頁制作平臺本文主要介紹如何設計一個高擴展的在線網(wǎng)頁制作平臺，會交代一些背景和最終的效果以及核心設計方案。市面上可使用的一些在線制作推廣平臺制作的頁面又不能很好地結(jié)合到自己的業(yè)務流程里面。如何設計高擴展的在線網(wǎng)頁制作平臺本文主要介紹如何設計一個高擴展的在線網(wǎng)頁制作平臺，會交代一些背景和最終的效果以及核心設計方案。體驗地址: https://godspen.ym...

dreamans 2019-08-26 10:42 評論0 收藏0
原生富文本編輯器

摘要：富文本選區(qū)為了更精細化控制富文本編輯器的內(nèi)容，可以使用方法，返回對象。前言前不久面某廠，負責人所在部門是做在線文檔的，最后幾個提問都是圍繞離線存儲和富文本編輯相關問題，在這塊有點懵，之前沒有接觸過富文本編輯器原理，在頁面光標能在文本之間隨意選擇，刪除和輸入，一直以為是一種hack技術，原來頁面本身有的一個屬性，配合實現(xiàn)還有js的方法和屬性。在這簡單記錄一下。實現(xiàn)原理實現(xiàn)富文本效...

TerryCai 2019-08-26 11:58 評論0 收藏0
原生富文本編輯器

摘要：富文本選區(qū)為了更精細化控制富文本編輯器的內(nèi)容，可以使用方法，返回對象。前言前不久面某廠，負責人所在部門是做在線文檔的，最后幾個提問都是圍繞離線存儲和富文本編輯相關問題，在這塊有點懵，之前沒有接觸過富文本編輯器原理，在頁面光標能在文本之間隨意選擇，刪除和輸入，一直以為是一種hack技術，原來頁面本身有的一個屬性，配合實現(xiàn)還有js的方法和屬性。在這簡單記錄一下。實現(xiàn)原理實現(xiàn)富文本效...

Simon 2019-08-02 10:37 評論0 收藏0
開發(fā)富文本編輯器的一些經(jīng)驗教訓

摘要：當然，這只是結(jié)合自己項目的工程結(jié)構和特點設置的一套使用方式，僅供參考開發(fā)富文本編輯器的教訓由于項目的時間較緊張，我在頁面上應用了框架的背景下，想當然的想要把也應用于富文本編輯器的開發(fā)，事實證明這是不太可行的。此文已由作者劉詩川授權網(wǎng)易云社區(qū)發(fā)布。歡迎訪問網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術產(chǎn)品運營經(jīng)驗。最近我們的產(chǎn)品有一個需求是要在PC端做一個面向用戶的書評編輯器，讓用戶和編輯在蝸牛讀書...

mtunique 2019-06-28 11:04 評論0 收藏0