富文本編輯器小結

近況

最近因爲公司業務上的需求，咱們須要一個本身的編輯器來編寫咱們獲得APP裏面的訂閱文章，爲何須要本身的編輯器，主要是由於用第三方的編輯器很難完成公司定製化的需求，好比：排版上咱們想要更好看點，統一，由於各個訂閱專欄編輯的人不同，容易形成各類不一樣的審美差別，解決方案有2種：

1. 採用一個可定製化的第三方富文本編輯器，而後本身寫插件來知足本身的要求。

2. 本身寫一個富文本編輯器。

最後和團隊的人商量決定，本身擼一個吧，由於使用第一種方案，依賴於別人的開源插件，老是不太放心，並且懼怕到時候有什麼問題，要研究他們的源碼，那就跟本身寫差很少多少，並且咱們本身擼一個，並不是要寫一個很是通用，能夠開源的富文本編輯器，咱們只須要針對咱們本身業務，寫一個定製化符合公司使用的編輯器就好了。綜上，我開始了此次很是愉快（坑爹）的編輯器之旅！！！

先看效果圖，如圖所示，若是有訂閱了咱們獲得APP裏面專欄文章的，能夠對比下，如今和8月的文章就能看出來了。

無處不在的坑

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

div仍是p

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

這裏就已經不太符合咱們要求了，不想要各類div標籤在文本外面，語義化來講，咱們應該用p標籤纔對。

解決方案： 初始化添加一個p標籤，而且裏面加入一個br
<p><br></p>

刪除也要當心翼翼

這個坑跟第一個一樣的緣由，只是表現形式不一樣，若是你開始刪除你的編輯文本，刪除完以後，整個可編輯元素，就變成空了，意味着，又沒有初始化的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, "<blockquote>")，它能添加或者更換，可是要取消他的時候，就不起做用了。

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

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樣式渲染。