1、之前说过在根目录的的index.html中引入了static下的tinymce后,项目中的tinymce就指向了static,所以我们可以不用修改node_module中的代码,直接在static下的tinymce中的plugins中开发新的插件
2、插件开发
首先:
根据中文文档:对你的新插件进行一个声明:tinymce.PluginManager.add('插件名', function(editor, url) {});
函数中传进来的editor就是页面上的编辑器,你可以通过调用它的方法动态添加相关的按钮或者插入html
然后:
我在这里开发的的是一个iframe插件,所以需要获取url路径,如果时开发其他的插件可以通过中文文档查看
var baseURL=tinymce.baseURL;
var iframe1 = baseURL+'/plugins/插件文件夹/iframe对应的页面.html';
editor.getParam('函数名', 默认值, '类型') -- 可以拿到你在setting设置中的元素
通过调用openDialog可以打开插件的弹出框,配置的信息就是页面上的内容。
最后:设置你的插件对应的图标,并添加到编辑器中
editor.ui.registry.getAll().icons.插件名|| editor.ui.registry.addIcon('插件名‘,svg图标)
onAction中就是openDialog()用来点击时打开弹出框,注意:你可以选择不使用openDialog(),这样你可以在这个方法中通过原生的document获取tinmyce使用的页面的元素,比如触发项目中封装的组件。
这样你的插件就开发完成,只要在setting中调用,就可以点击打开一个有着iframe的弹窗