国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

富文本編輯器小結

CatalpaFlat / 2613人閱讀

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

近況

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

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

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

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

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

無處不在的坑

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

div還是p

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

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

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


刪除也要小心翼翼

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

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

行內標簽很有個性

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

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

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

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

解決方案： 在執行代碼的時候，多加一個判斷，判斷當前選中文字的外標簽是什么，再決定是需要執行什么命令。

let Range = document.getSelection().getRangeAt(0),
     formatName = Range.commonAncestorContainer.parentElement.nodeName === "BLOCKQUOTE" ? "P" : "BLOCKQUOTE";
document.execCommand("formatBlock", false, formatName)
removeFormat并不是萬能的

清楚格式這個命令，主要會清除掉附帶在標簽上的內聯樣式，也就是style，但是不會清除class名稱，這意味著，從外部粘貼過來的文本，如果不幸的ClassName和你的css里面的ClassName重復了，就會帶上你的css樣式。而且也不會清楚里面內聯元素標簽，什么意思呢？就是span都還是存在的，從原理上來說這個不影響最后的顯示，但沒有必要需要這些個標簽，很容易產生其他的問題。

解決方案：執行清楚格式操作的時候，多加一些操作，把無用的樣式，標簽和ClassName全部干掉。（此處必須有殺氣！）

其他

至于其他的很多命令（indent，fontSize，fontColor...），我這里沒有使用，也不知道是否有坑，原因是前面說到的樣式統一，保證美觀，不支持內聯樣式，由統一的css樣式渲染。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50192.html

相關文章

  • 富文本編輯器小結

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

    ZHAO_ 評論0 收藏0

  • 如何設計高擴展的在線網頁制作平臺

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

    dreamans 評論0 收藏0

  • 原生富文本編輯器

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

    TerryCai 評論0 收藏0

  • 原生富文本編輯器

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

    Simon 評論0 收藏0

  • 開發富文本編輯器的一些經驗教訓

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

    mtunique 評論0 收藏0

發表評論

0條評論

CatalpaFlat

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<