Tinymce编辑器插件篇
温馨提示:
本文最后更新于2021年08月03日,已超过3年4个月(约1219天)没有更新,若内容或图片失效,请留言反馈。
很多人不知道怎么创建Tinymce编辑插件,
今天我就来讲讲一个例子,
当然我在编辑里也添加两个例子,
你们可以仿照写,
下载插入和评论显示{这个你要模板自带支持},
路径admin/tinymce/{前提你没改过路径},
只要懂点js一般人都会,
好了不废话了,
示例插件
如何添加一个简单的工具栏按钮和菜单项,
该按钮打开一个对话框,
让您输入插入到编辑器中的标题,
该菜单项将在对话框中打开站点,
创建插件文件夹
在admin/tinymce/tinymce/plugins文件夹中,
创建example{名称自己定义}文件夹,
创建plugin.js
在刚才创建的example文件夹中,
创建plugin.js,
如果你把文件压缩了,
名称改过plugin.min.js,
两个文件一起存在也行,
方便以后修改,
代码
tinymce.PluginManager.add('example', function(editor, url) {
// 添加一个打开窗口的按钮
editor.addButton('example', {
text: 'My button',
icon: false,
onclick: function() {
// 打开窗口
editor.windowManager.open({
title: 'Example plugin',
body: [
{type: 'textbox', name: 'title', label: 'Title'}
],
onsubmit: function(e) {
// 在提交表单时插入内容
editor.insertContent('Title: ' + e.data.title);
}
});
}
});
// 将菜单项添加到工具菜单
editor.addMenuItem('example', {
text: 'Example plugin',
context: 'tools',
onclick: function() {
// 打开特定网址的窗口
editor.windowManager.open({
title: 'TinyMCE site',
url: 'https://crazyus.us',
width: 800,
height: 600,
buttons: [{
text: 'Close',
onclick: 'close'
}]
});
}
});
return {
getMetadata: function () {
return {
name: "Example plugin",
url: "https://crazyus.us"
};
}
};
});
最后
修改tinymce/tinymce.config.js,
找到tinymce.init,添加
代码如下{记得在后头添加需要空格},
tinymce.init({
.......
plugins: 'example',
toolbar: 'example'
...........
});
可以看效果了
大家多想想吧,
让这个Tinymce更强大些,
对了编辑器的挂载点多了个,
<?php doAction('adm_writelog_bottom'); ?>
别把所有的插件都放开头,
影响美观,
今天就到这里,
后期再补充.
正文到此结束
发表吐槽
你肿么看?
既然没有吐槽,那就赶紧抢沙发吧!