【代码导读】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

该命名空间中的内容主要用于修复、过滤格式。