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
