【代碼導讀】Github 開源項目——wysihtml5 富編輯器（Bootstrap 風格）【二】

標籤：style   blog   http   io   os   ar   for   strong   sp   

如果您意外進入該頁面，或許從下述連結開始更容易理解：

【代碼導讀】Github 開源項目——wysihtml5 富編輯器（Bootstrap 風格）【一】

 

1. 整體結構

在 wysihtml5 中，所有對象受 wysihtml5 命令空間保護，從其初始化定義看，整個代碼架構一目瞭然：

https://github.com/xing/wysihtml5/blob/master/src/wysihtml5.js

 1 var wysihtml5 = { 2   version: "0.4.0pre", 3    4   // namespaces 5   commands:   {}, 6   dom:        {}, 7   quirks:     {}, 8   toolbar:    {}, 9   lang:       {},10   selection:  {},11   views:      {},12   13   INVISIBLE_SPACE: "\uFEFF",14   15   EMPTY_FUNCTION: function() {},16   17   ELEMENT_NODE: 1,18   TEXT_NODE:    3,19   20   BACKSPACE_KEY:  8,21   ENTER_KEY:      13,22   ESCAPE_KEY:     27,23   SPACE_KEY:      32,24   DELETE_KEY:     4625 };

 

1.1. editor（編輯器類）

https://github.com/xing/wysihtml5/blob/master/src/editor.js

wysihtml5.Editor 編輯器類未在全域空間 wysihtml5 中直接初始化給出。它是整個編輯器的總控模組及執行入口，通過調用其建構函式便能建立一個編輯器對象，且保證同一頁面中的各個編輯器互不影響。

該類可以接收不同的配置項來修改編輯器的預設行為，且向外匯出大量事件。

它是 app 與編輯器之前的通訊結點。

快速初始化一個預設編輯器：

1 <script>2 var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id of textarea element3   toolbar:      "wysihtml5-toolbar", // id of toolbar element4   parserRules:  wysihtml5ParserRules // defined in parser rules set 5 });6 </script>

1.2 views（視圖命名空間）

該命名空間用於管理以下幾個類：

• wysihtml5.views.View
  https://github.com/xing/wysihtml5/blob/master/src/views/view.js
  視圖類，編輯器與編輯面板之間的抽象層，主要用於切換程式碼檢視與編輯面板視圖。
• wysihtml5.views.Composer
  https://github.com/xing/wysihtml5/blob/master/src/views/composer.js
  編輯面板類，由其構造產生的對象可以直接對應一個編輯區（即 iframe），用於控制一個編輯區的樣式及行為，同時提供了訪問編輯區中內容的介面。其建立時，會初始化沙箱，同時建立選擇管理器、命令管理器、自動鍵接管理器、對象大小調整管理器、撤銷管理器、換行管理器。
  它通過 wysihtml5.views.Composer.prototype.observe 監控編輯區中的事件，wysihtml5.views.Composer.prototype.style 管理編輯區顯示樣式、重設 placeholder、與 textarea 同步 focus/blur 事件。
  訪問串連，可見如果效果：
  
  前往查看：http://classfoo.com/app/editor
• wysihtml5.views.Synchronizer
  保證編輯面版與 textarea 元素中的內容永遠一致。
• wysihtml5.views.Textarea
  提供介面訪問 textarea 元素。

1.3 wysihtml5.toolbar.Toolbar（工具列類）

https://github.com/xing/wysihtml5/blob/master/src/toolbar/toolbar.js

管理編輯器中的工具列，響應按鈕事件，並轉換成對應的命令發送給 wysihtml5.views.Composer 。

通過成員 wysihtml5.toolbar.Speech 提供語音功能。

通過成員 wysihtml5.toolbar.Dialog 實現對話方塊，實現除了點擊之外的另一種互動輸入，可以用於實現複雜的外掛程式。

前往查看：http://classfoo.com/app/editor

1.4 wysihtml5.commands（命令命名空間）

https://github.com/xing/wysihtml5/blob/master/src/commands/formatBlock.js

將工具列觸發的事件轉換成對應的命令，及實現撤銷、重做命令。

1.5 wysihtml5.selection （選取器）

實現編輯過程中的範圍選中功能，主要是由於瀏覽器內建的 window.getSelection 存在很多問題，當前主要基於外部庫 Rangy 實現。

1.6 wysihtml5.dom（dom 操作）

大量 dom 操作，如果替換成 Jquery 實現，應該能減少不小代碼體積。

https://github.com/xing/wysihtml5/tree/master/src/dom

1.7 wysihtml5.lang（文法命名空間）

https://github.com/xing/wysihtml5/tree/master/src/lang

實現幾種常用的文法：

數組：

https://github.com/xing/wysihtml5/blob/master/src/lang/array.js

對象：

https://github.com/xing/wysihtml5/blob/master/src/lang/object.js

字串：

https://github.com/xing/wysihtml5/blob/master/src/lang/string.js

事實派發：

https://github.com/xing/wysihtml5/blob/master/src/lang/dispatcher.js

1.8 wysihtml5.quirks

該命名空間中的內容主要用於修複、過濾格式。

【代碼導讀】Github 開源項目——wysihtml5 富編輯器（Bootstrap 風格）【二】