前言html
最近在Gitee上放出了我的花費大量時間精力打造的富文本,受到了部分網友們的關注。部分網友對富文本涉及到的技術,設計實現都很感興趣。特別是對比目前市面上的富文本後,豐富的功能更是令關注的網友們好奇。所以我想就這個富文本的開發過程,作一個簡單的系列博客,介紹這個富文本從技術選型,技術難點,核心功能設計實現等方面。也但願對有興趣閱讀富文本源碼需求的網友有所幫助。前端
富文本截圖:vue
浮動文本、圖片、視頻功能react
模擬移動屏幕功能jquery
繪製流程圖功能:git
技術選型探討:編程
目前市面上流行的前端技術棧以下: 框架
一、vue技術棧dom
二、react技術棧mvvm
三、angular技術棧
四、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技術棧的項目。