tinymce学习笔记--自定义插件--基于Vue

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的弹窗

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容