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

若是您意外進入該頁面，或許從下述連接開始更容易理解：

【代碼導讀】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:     46
25 };

 

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 element
3   toolbar:      "wysihtml5-toolbar", // id of toolbar element
4   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

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