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">​</span>‘  ?

  是为了把视图滚动到当前的光标的位置。

涉及到的命令:

mceInsertContent、Delete (删除选择的部分)

涉及到的核心函数:

selection、editor.parser、new Serializer

tinymce原装插件源码分析(一)-hr的更多相关文章

  1. tinymce原装插件源码分析(五)-searchreplace

    searchreplace 功能:查找和替换 代码注释见: https://www.xunhanliu.top/static/js/tinymce/plugins/searchreplace/plug ...

  2. tinymce原装插件源码分析(二)-link

    link 功能描述如下: 单纯放置光标: 1.如果光标放到了<a>上,读取a标签的内容,并弹框显示,确定的时候,更新当前a标签. 2.否则,就创建弹框,确定的时候,按照参数添加a标签. s ...

  3. tinymce原装插件源码分析(四)-fullscreen

    fullscreen 作为一款文本编辑器,全屏功能是非常有必要的.在插件中主要是修改一些css style和触发resize事件. style问题(反例): 见github源码:https://git ...

  4. tinymce原装插件源码分析(三)-code

    code: 用于显示源码.主要包含一个弹框.设置显示内容以及内容的更新. function showDialog() { var win = editor.windowManager.open({ t ...

  5. tinymce原装插件源码分析(七)-使能css、script

    在tinymce中使用css个script tinymce的编辑器中css和script默认是不起作用的.(编辑器主要面向写文章使用,考虑到xss攻击,默认是不启用的) 需要修改tinymce.js中 ...

  6. tinymce原装插件源码分析(六)-preview

    priview 此插件文件结构比较简单,按钮注册.editor.windowManager.open.窗口出现之前的渲染数据的准备.页面代码的准备. 注意: 1.preview的默认宽高设置: 2.c ...

  7. Mybatis源码学习第七天(插件源码分析)

    为了不把开发和源码分析混淆,决定分开写; 接下来分析一下插件的源码,说道这里老套路先说一个设计模式,他就是责任链模式 责任链模式:就是把一件工作分别经过链上的各个节点,让这些节点依次处理这个工作,和装 ...

  8. 【前端必会】不知道webpack插件? webpack插件源码分析BannerPlugin

    背景 不知道webpack插件是怎么回事,除了官方的文档外,还有一个很直观的方式,就是看源码. 看源码是一个挖宝的行动,也是一次冒险,我们可以找一些代码量不是很大的源码 比如webpack插件,我们就 ...

  9. Android Small插件化框架源码分析

    Android Small插件化框架源码分析 目录 概述 Small如何使用 插件加载流程 待改进的地方 一.概述 Small是一个写得非常简洁的插件化框架,工程源码位置:https://github ...

随机推荐

  1. 关于函数调用约定-thiscall调用约定

    函数调用约定描述了如何以正确的方式调用某些特定类型的函数.包括了函数参数在栈上的分配顺序.有哪些参数将通过寄存器传入,以及在函数返回时函数栈的回收方式等. 函数调用约定的几种类型 stdcall,cd ...

  2. AIM Tech Round 5 1028cf(A-E)

    AIM Tech Round 5 (codeforces上题目编号是1028)(A-E) ---完全被这次比赛打击,自己真的很渣--- 战况 依旧3题选手 被构造题坑得好惨 稍稍涨了rating,希望 ...

  3. jquery.nicescroll.min.js滚动条插件的用法

    1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaper ...

  4. CentOS 7编译安装Python3.7.X

    在CentO S上通过编译安装Python3.7,添加python3软链,并使用python3. 环境 安装环境如下: Windows 10 Pro VMWare Workstation 15 Pro ...

  5. 页面元素的定位:getBoundingClientRect()和document.documentElement.scrollTop

    1.document.documentElement.getBoundingClientRect MSDN对此的解释是: Syntax oRect = object.getBoundingClient ...

  6. (2016北京集训十三)【xsy1531】魔法游戏 - Nim游戏

    题解: 好题!我的结论很接近正解了... 把一个数化成二进制,每次至少要拿走一位,最多全拿走,不能不拿.那么这就是一个经典的Nim问题了,子树异或起来就是根节点的答案,随便递推一下就行了. 代码: # ...

  7. 用Arcade表达式添加标签

    Arcade表达式是轻量级的脚本语言,我们可以通过全局变量$feature获取要素属性.比如说,要为城市添加标签,利用CITY_NAME列,我们可以编写语句:$feature.CITY_NAME.Ar ...

  8. Flask入门系列(转载)

    一.入门系列: Flask入门系列(一)–Hello World 项目开发中,经常要写一些小系统来辅助,比如监控系统,配置系统等等.用传统的Java写,太笨重了,连PHP都嫌麻烦.一直在寻找一个轻量级 ...

  9. Set&Map区别Array

    Set&Map区别Array 在Set内部,两个NaN是相等.两个对象总是不相等的.可以用length来检测 四个操作方法: add(value):添加某个值,返回Set结构本身. delet ...

  10. 一行代码解决IE兼容性问题

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> ...