tinymce原裝插件源碼分析（一）-hr

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

tinymce.PluginManager.add('hr', function(editor) {   //如果配置中plugins參數填有hr，就執行這句話，進行加載hr插件。
    editor.addCommand('InsertHorizontalRule', function() { //這里tinymce進行添加命令的解析。注 tinymce.js L:20582行已經有這個命令的解析，所以這個函數可加可不加
        editor.execCommand('mceInsertContent', false, '<hr />'); //這個函數是執行插入命令，在選擇位置處插入'<hr />'並刪除選擇的內容，或者在光標位置進行插入。
    });

    editor.addButton('hr', {  //L31952: Adds a button that later gets created by the theme in the editors toolbars.
                            //也就是這里的配置在toolbars中展示的樣子，及觸發的命令
        icon: 'hr',
        tooltip: 'Horizontal line',
        cmd: 'InsertHorizontalRule'
    });

    editor.addMenuItem('hr', {//這里配置它在菜單中的樣子及，它的位置載 insert子菜單下。
        icon: 'hr',
        text: 'Horizontal line',
        cmd: 'InsertHorizontalRule',
        context: 'insert'
    });
});

 

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

                node = fragment.lastChild;
                if (node.attr('id') == 'mce_marker') {
                    marker = node;

                    for (node = node.prev; node; node = node.walk(true)) {
                        if (node.type == 3 || !dom.isBlock(node.name)) {
                            if (editor.schema.isValidChild(node.parent.name, 'span')) {
                                node.parent.insert(marker, node, node.name === 'br');
                            }
                            break;
                        }
                    }
                }

 

---

 

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

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

涉及到的命令：

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

涉及到的核心函數：

selection、editor.parser、new Serializer