【開源我寫的富文本】打造全網最勁富文本系列之技術選型

前言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技術棧的項目。

 

Gitee  :  https://gitee.com/kevin-huang/Bui-Editor-public

相關文章
相關標籤/搜索