近況
最近由于公司業(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
命令來查看的），如果內(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
<p><br></p>
刪除也要小心翼翼
這個(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ù)我推測(cè)，因?yàn)槭侨∠臅r(shí)候，判斷條件為是否有相關(guān)命令的css樣式逞力，并不是單純的文字外部標(biāo)簽名稱曙寡。
formatBlock跟你說，不是所有的牛奶都是特侖蘇寇荧！
使用formatBlock來添加或者更換文字的外標(biāo)簽時(shí)举庶，要特別注意--BLOCKQUOTE這個(gè)東東,
document.execCommand('formatBlock', false, "<blockquote>")，它能添加或者更換砚亭，但是要取消他的時(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樣式渲染绽族。
