基礎概念
基本api
富文字編輯器是前端開發中常見的功能，一般情況下，我們可以用成熟的開源富文字編輯器，比如比較老牌的ueditor, ckeditor, 或者近幾年興起的draft.js等。
但是，總會有二般情況：
這個時候，我們就面臨著兩種選擇：
對這些開源編輯器進行二次開發，以適應應用需求；
自己從頭擼一款富文字編輯器，自己掌控一切；
這兩種選擇，都意味著我們要對富文字編輯器的底層技術有所了解，甚至如果要自己擼一款富文字編輯器的話，還要非常精通這些技術，所以從本文開始，就將用比較通俗易懂的方式（就是好多好多動態圖和邏輯圖），對開發富文字編輯器涉及到的基礎技術進行講解。以幫助朋友們飛公升（公升職加薪走一波）。
整體來說，富文字編輯器經歷了三個階段的發展。
那時候的編輯器存活到現在的已經沒有了，但他們是開拓者，這些前輩開發者利用瀏覽器dom提供的contenteditable屬性和document.execcommand方法，開發出了第一代的輕量級的富文字編輯器。雖然其功能及其簡單，也只是單純利用了web瀏覽器提供的原生api，但是為後面2.0時代的富文字編輯器打下了基礎。
進入2.0時代，由於瀏覽器document.execcommand有著各種各樣的問題，大神們決定自己實現execcommand方法，自己掌控內容的變化與格式，由此產生了一大批優秀的更加現代化的富文字編輯器，如ueditor，ckeditor早期版本等。
後來，進入21世紀後，檢視與模型分離的思想逐漸征服了前端的大神們，於是又出現了改進版的將檢視與資料模型進行分離管理的現代化編輯器，如draft.js,ckeditor後期版本等。
由於急於contenteditable的編輯器，其輸入完全是由使用者掌控，而非由開發者掌控，所以就會出現無窮種不同的dom結構，造成各種不可控不可預知的行為後果，這對於追求可控嚴謹的前端工程師們來說簡直是噩夢。所以出現了3.0時代的富文字編輯器。
因為第三代編輯器實現起來動輒需要幾十萬到幾百萬行**，需要乙個非常龐大和專業的團隊去開發和維護，也只有文字編輯的巨頭能搞得起，所以，當前應用最廣的依舊是第二代瀏覽器。
在乙個完整應用介面中，富文字編輯器通常都是乙個表單的一部分，而在編輯器中，編輯區是除去工具條（各種功能按鈕所在區域）和狀態列（顯示字數等額外資訊）以外的，允許使用者輸入內容的區域。
但是編輯區並不是富文字編輯器獨有的概念，事實上，只要是設定了contenteditable屬性的dom元素包裹的內容區，都允許使用者輸入內容和對其中的內容進行修改，那這塊內容區就是可編輯區，而富文字編輯器只是繼承了這種特性和概念。
選區是指當乙個編輯區獲得焦點時，使用者選擇的文字範圍或插入符號的當前位置。 現代瀏覽器通常乙個編輯區都只有乙個選區，只要火狐瀏覽器可以在乙個編輯器內通過按住鍵盤alt鍵產生多個選區。乙個選區可以包含多個dom元素，即它是可以跨節點的。
拖藍，表示乙個包含節點與文字節點的一部分的文件片段。通常情況下，選區與拖藍所包含的dom元素部分是相同的，它們的不同在於其本質，選區偏重於強調範圍和位置，而拖藍強調的則是包含的dom內容。從它的表現形式就可以知道它為什麼為叫做拖藍（拖動後產生的藍色區域）。
當然，拖藍是中文意譯法，其英文是range（範圍）游標是特殊的拖藍，可以認為游標就是移動拖藍的某個端點到另乙個端點的位置，兩個端點重合時所在的區域或位置。
上面的html
語句表明這個
div包裹的區域是允許使用者進行編輯的。這個屬性有三個可選值：
bool = document.execcommand(name, isshowdefaultui, argument);具體可閱讀 document.execcommand 的api
seleection和range都是web api的一部分，同時他們也是實現在開發富文字編輯器中最常用到的api.對於它們的具體研究，請參閱：
dom在實現富文字編輯器的過程中，需要大量的
dom操作，這就要求我們要對dom的各種api非常熟悉，才能運用正確的api準確實現預期的功能。當然，
dom api非常之多而且很龐雜，很多都是富文字編輯器開發中用不到的，基於此考慮，我單獨介紹了開發富文字編輯器常用的dom api， 請參閱：富文字編輯器開發系列——常用dom api
富文字編輯器
關於使用富文字編輯器的一些小坑 官網 1.專案 片 editor fail function xhr,editor,result custominsert function insertimg,result,editor this.editor.create this.editor.txt.html...
富文字編輯器
富文字編輯器，rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditorallowfilemanager 是否允許瀏覽伺服器已上傳...
富文字編輯器
富文字編輯器，rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditor allowfilemanager 是否允許瀏覽伺服器已上...