前言
最近在Gitee上放出了個人花費大量時間精力打造的富文字，受到了部分網友們的關注。部分網友對富文字涉及到的技術，設計實現都很感興趣。特別是對比目前市面上的富文字後，豐富的功能更是令關注的網友們好奇。因此我想就這個富文字的開發過程，做一個簡單的系列部落格，介紹這個富文字從技術選型，技術難點，核心功能設計實現等方面。也希望對有興趣閱讀富文字原始碼需求的網友有所幫助。
富文字截圖：
浮動文字、圖片、視訊功能
模擬移動螢幕功能
繪製流程圖功能：
技術選型探討：
目前市面上流行的前端技術棧如下：
1、vue技術棧
2、react技術棧
3、angular技術棧
4、jquery技術棧
前三者技術棧都是具有響應式設計思想，mvvm模式的框架。這三者框架都有自己的設計語言風格，對程式設計實現都有固定的模式要求。後者jquery是一個老牌的dom操作框架，除了dom操作，其他功能都相對較弱，但這也使其在應用上的設計組合比較靈活。
富文字技術場景分析：
基礎結構：
富文字元件通常由一個div、textarea作為輸入域，其修飾功能為一組用於互動的工具欄按鈕，同時需要一個滑鼠右鍵選單。從這裡可以看出，富文字自身的基礎結構是不復雜的。
富文字中的內容是由html包裝使用者輸入內容而成，其結構根據使用者輸入而定，具有不確定性，多樣性。從這方面看，富文字的內容結構是複雜的。
事件場景：
富文字的事件相對於普通的表單事件場景，要求更高，對各類使用者事件響應要做出詳細的區分，比如一個元素需要區分mouseup、mousedown、click、並分別做不同的響應處理。
同時，富文字內容中動態生成的html結構，如image、table需要動態繫結/解除對應的事件。
修飾表現場景：
富文字中的修飾是根據使用者操作而形成的，具有不定性，多樣性。
平臺場景：
通常情況下，富文字應用都是指pc端的富文字編輯器，移動端富文字由於移動端的特性，難以做到和pc一樣的功能，同時也不合適做到一致的功能。移動端的富文字應該根據移動裝置的特點進行獨立的設計，所以個富文字是不考慮適用於移動端裝置的。
最終選型：
通過上面的分析可知，富文字自身固定的結構是簡單的，這些固定的結構也不需要響應使用者的輸入。而富文字動態的內容形成的結構是不確定的，變化複雜的，這些變化的結構內容需要響應使用者的輸入互動。
問題1：是否需要應用響應式？
不適用於移動裝置的富文字，不需要響應式。
問題2：是否需要雙向聯動？
無雙向聯動的場景需求。
問題3：是否適用於模板機制？
固定的結構不復雜，可變結構複雜，不適用於模板機制。
問題4：那種框架才能靈活設計編寫程式碼？
vue、react、angular這些框架都有一定的程式設計規範，反而形成了束縛。採用原生JavaScript是最靈活的，為減低dom操作的程式設計工作，可加入jquery。
最終選型： 原生JavaScript prototype物件導向 + jquery dom操作庫。
後期擴充套件：
後期可在 核心程式碼的基礎上，做一次 vue 或者 react的 包裝外殼，實現適配vue、react技術棧的專案。
Gitee : https://gitee.com/kevin-huang/Bui-Editor-public