文件结构
首先在TinyMCE/plugins文件夹中创建一个与插件同名的文件夹。该文件夹内的插件js文件命名方式有两种。一种为plugin.js,当开发人员使用未压缩的tinymce.js时,会使用该文件。同样,在使用tinymce.min.js时,会加载加载plugin.min.js。所以如果你不确定会使用tinymce.js还是tinymce.min.js,干脆两个都留着,一个叫plugin.js,一个叫plugin.min.js。
插件的文件结构示例:
/tinymce/plugins/example/plugin.js
/tinymce/plugins/example/plugin.min.js
使用插件的方法与自带插件是一样的:
tinymce.init({
selector: 'textarea',
plugins: 'example',
});
一个插件示例
这个插件示例演示了如何添加一个简单的工具栏按钮和菜单项。此按钮打开一个对话框,允许在编辑器中输入标题。菜单项将打开与按钮相同的对话框。
tinymce.PluginManager.add('example', function(editor, url) {
var openDialog = function () {
return editor.windowManager.open({
title: '这里是弹窗标题',
body: {
type: 'panel',
items: [
{
type: 'input',
name: 'title',
label: 'Title'
}
]
},
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'submit',
text: 'Save',
primary: true
}
],
onSubmit: function (api) {
var data = api.getData();
// 将输入框内容插入到内容区光标位置
editor.insertContent('插入的文字是: ' + data.title);
api.close();
}
});
};
// 注册一个工具栏按钮名称
editor.ui.registry.addButton('example', {
text: '工具栏按钮名',
onAction: function () {
openDialog();
}
});
// 注册一个菜单项名称 menu/menubar
editor.ui.registry.addMenuItem('example', {
text: 'Example菜单名',
onAction: function() {
openDialog();
}
});
return {
getMetadata: function () {
return {
//插件名和链接会显示在“帮助”→“插件”→“已安装的插件”中
name: "Example plugin",//插件名称
url: "http://exampleplugindocsurl.com", //作者网址
};
}
};
});