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
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">​</span>‘ ?
是為了把視圖滾動到當前的光標的位置。
涉及到的命令:
mceInsertContent、Delete (刪除選擇的部分)
涉及到的核心函數:
selection、editor.parser、new Serializer
tinymce原裝插件閱讀(一)-hr