tinymce簡介

tinymce是一款能方便無限擴展的網頁富文本編輯器。

tinymce原裝插件已經十分豐富，對於文本編輯（blog等文章）是綽綽有余，但是應對一些復雜的應用，比如在上面開發html網頁等，還是有些捉襟見肘。

鑒於，網上關於tinymce的文章都是基於簡單使用，而關於插件編寫等，一概搜不到。 本系列文章就tinymce一個較老的版本（4.2.8 (2015-xx-xx)）進行分析。js源碼見: https://github.com/xunhanliu/static/tree/master/js/tinymce .

插件位於plugins目錄下。關於plugin.js文件的加載。見: tinymce.js L:33446, 這兩行就是如果找到了相應的plugin.min.js就加載plugin.js(原版是加載plugin.min.js，這裏為了調試，讓它加載了plugin.js)

註：註釋或文中 tinymce.js L:20582或者 L:20582的形式都表示在tinymce.js的行號。

插件 hr

 1 tinymce.PluginManager.add(‘hr‘, function(editor) {   //如果配置中plugins參數填有hr，就執行這句話，進行加載hr插件。
 2     editor.addCommand(‘InsertHorizontalRule‘, function() { //這裏tinymce進行添加命令的解析。註 tinymce.js L:20582行已經有這個命令的解析，所以這個函數可加可不加
 3         editor.execCommand(‘mceInsertContent‘, false
 
, ‘<hr />‘); //這個函數是執行插入命令，在選擇位置處插入‘<hr />‘並刪除選擇的內容，或者在光標位置進行插入。
 4     });
 5 
 6     editor.addButton(‘hr‘, {  //L31952: Adds a button that later gets created by the theme in the editors toolbars.
 7                             //也就是這裏的配置在toolbars中展示的樣子，及觸發的命令
 8         icon: ‘hr‘,
 9         tooltip: ‘Horizontal line‘,
 
10         cmd: ‘InsertHorizontalRule‘
11     });
12 
13     editor.addMenuItem(‘hr‘, {//這裏配置它在菜單中的樣子及，它的位置載 insert子菜單下。
14         icon: ‘hr‘,
15         text: ‘Horizontal line‘,
16         cmd: ‘InsertHorizontalRule‘,
17         context: ‘insert‘
18     });
19 });

mceInsertContent命令簡單解讀

上文L:3中涉及到一個核心命令mceInsertContent（在光標處插入特定的內容）見L:20268。

這裏省略了n行（這一部分都是關於代碼健壯性判斷）。。。

常識：selection是與用鼠標刷選字體（藍底白字）有關。selection.isCollapsed() 只放置光標不選擇，會返回true。

這裏把hr和marker(span)組裝起來，生成可跌叠代的樹結構，類似於dom結構。

parser.parse 函數定義在 L; 12081位置處。其中核心部分：

此函數的第二個參數部分需要是包含內容的父標簽。

1、serializer.serialize是parser.parse的逆運算
2、parser結構的遍歷的一個例子：L20411~L20423

 1                 node = fragment.lastChild;
 2                 if (node.attr(‘id‘) == ‘mce_marker‘) {
 3                     marker = node;
 4 
 5                     for (node = node.prev; node; node = node.walk(true)) {
 6                         if (node.type == 3 || !dom.isBlock(node.name)) {
 7                             if (editor.schema.isValidChild(node.parent.name, ‘span‘)) {
 8                                 node.parent.insert(marker, node, node.name === ‘br‘);
 9                             }
10                             break;
11                         }
12                     }
13                 }

這裏為什麽加了額外加一個’<span id="mce_marker" data-mce-type="bookmark">&#xFEFF;&#x200B;</span>‘ ？

　　是為了把視圖滾動到當前的光標的位置。

涉及到的命令：

mceInsertContent、Delete (刪除選擇的部分)

涉及到的核心函數：

selection、editor.parser、new Serializer

tinymce原裝插件閱讀（一）-hr