tinymce简介 tinymce是一款能方便无限扩展的网页富文本编辑器. tinymce原装插件已经十分丰富,对于文本编辑(blog等文章)是绰绰有余,但是应对一些复杂的应用,比如在上面开发html网页等,还是有些捉襟见肘. 鉴于,网上关于tinymce的文章都是基于简单使用,而关于插件编写等,一概搜不到. 本系列文章就tinymce一个较老的版本(4.2.8 (2015-xx-xx))进行分析.js源码见: https://github.com/xunhanliu/static/tree/m…

searchreplace 功能:查找和替换 代码注释见: https://www.xunhanliu.top/static/js/tinymce/plugins/searchreplace/plugin.js 结构 界面的注册还是editor.addMenuItem和editor.addButton.(plugin.js 370-385).不过入口的形式与前几节的有稍许的变化: 他把界面注册部分放到了Plugin函数的init函数内部了: 这里推测:tinymce.PluginManager.…

fullscreen 作为一款文本编辑器,全屏功能是非常有必要的.在插件中主要是修改一些css style和触发resize事件. style问题(反例): 见github源码:https://github.com/lynzz/element-admin 全屏后: 原因是z-index style风格没有调整好.调整好z-index后: 这里在plugin.js强调三个点: 1. 注意一下窗口的获取方式 2.插件自定义事件在editor上的定义和触发 定义: 触发: 这里的这个事件应该是控制一些…

code: 用于显示源码.主要包含一个弹框.设置显示内容以及内容的更新. function showDialog() { var win = editor.windowManager.open({ title: "Source code", body: { type: 'textbox', name: 'code', multiline: true, minWidth: editor.getParam("code_dialog_width", 600), minHe…

link 功能描述如下: 单纯放置光标: 1.如果光标放到了<a>上,读取a标签的内容,并弹框显示,确定的时候,更新当前a标签. 2.否则,就创建弹框,确定的时候,按照参数添加a标签. seletion: 1.部分或全部选择<a>的时候,与上面的1一样,更新. 2.选择非文字的<span>.<p>等,会读取选择的文字,并弹框,把显示文字字段填成选择的文字,根据修改,把选择的文字修改成<a>. 当然实际上link的功能不止这些.还有锚点等功能.这需…

在tinymce中使用css个script tinymce的编辑器中css和script默认是不起作用的.(编辑器主要面向写文章使用,考虑到xss攻击,默认是不启用的) 需要修改tinymce.js中几行代码,可以使其起作用. 1.SaxParser.parse中,关于script标签. L11732- L11758注释掉 这一部分的意思是,在Start element处遇见script等标签,直接跳过,不进行解析(不追加到DOM中). 这个函数的调用,一般在editor.setContent中…

priview 此插件文件结构比较简单,按钮注册.editor.windowManager.open.窗口出现之前的渲染数据的准备.页面代码的准备. 注意: 1.preview的默认宽高设置: 2.css的加载: 3.js的加载与css加载类似 4.editor.windowManager.open的页面加载. 使用onPostRender,由于已经准备好iframe框,作者在onPostRender中把准备好的页面数据追加到iframe上.…

_ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DOM操作. 三. Vue.nextTick的调用方式如下: 四:vm.$nextTick 与 setTimeout 的区别是什么? 五:理解 MutationObserver 六:nextTick源码分析 回到顶部 一. 什么是Vue.nextTick()? 官方文档解释为:在下次DOM更新循环结束之…

为了不把开发和源码分析混淆,决定分开写; 接下来分析一下插件的源码,说道这里老套路先说一个设计模式,他就是责任链模式 责任链模式:就是把一件工作分别经过链上的各个节点,让这些节点依次处理这个工作,和装饰器模式不同,每个节点都知道后继者是谁,适合为完成同一个请求需要多个处理类的场景; Handler:定义了一个处理请求的标准接口; ConcreteHandler:具体的处理者,处理他负责的部分,根据业务可以结束处理流程,也可以将请求转发给他的后继者; client:发送者,发起请求的客户端; 责任…

ABP在初始化阶段做了哪些操作,前面的四篇文章大致描述了一下. 为个更清楚的描述其脉络,做了张流程图以辅助说明.其中每一步都涉及很多细节,难以在一张图中全部表现出来.每一步的细节(会涉及到较多接口,类,调用关系,步骤流程什么的)会在后面的文章中通过其他图和文字详细描述.其实如果仔细分析Abp原代码的话,会发现每个功能模块的实现思路和手法大致基本是一致的. 返回ABP源码分析系列文章目录…