随笔-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设置中的元素

let test= editor.getParam('testName', {}, 'String');

插件的主体

通过调用openDialog可以打开插件的弹出框，配置的信息就是页面上的内容。

最后：设置你的插件对应的图标，并添加到编辑器中

editor.ui.registry.getAll().icons.插件名|| editor.ui.registry.addIcon('插件名‘，svg图标)

添加编辑器中的按钮

onAction中的openDialog()就是用来点击时用来打开弹出框，注意：你可以选择不使用openDialog()，这样你可以在这个方法中通过原生的document获取tinmyce使用的页面的元素，比如触发项目中封装的组件。

editor.ui.registry.addButton('XXX', {
	icon: 'XXX',
    tooltip: pluginName,
	onAction: function() {
	let btn = document.getElementById('dialogImg')
	    btn.click()
	}
});

这样你的插件就开发完成，只要在setting中调用，就可以点击打开一个有着iframe的弹窗