Tinymce编辑器高级功能扩展

前面写了经典编辑器Tinymce基础功能扩展,WordPress经典编辑器Tinymce高级功能扩展有多高级呢?WordPress经典编辑器Tinymce基础功能扩展几乎没有交互,高级扩展中是需要交互的,主要涉及到数据传递,其在开发插件时极其重要。

Tinymce高级功能扩展

WordPress声明编辑器扩展方式是一样的,所以这里我就不多说了,不清楚看上一篇文章。

js弹窗扩展

js文件名和PHP声明时一致就行了,代码我从国内复制粘贴最多的一篇文章中拿来的,只做演示。

(function($) {
tinymce.create('tinymce.plugins.specs_code_plugin', {
init: function(editor, url) {
editor.addButton('specs_code_plugin', {
title: "Insert Code", // 鼠标放在按钮上时的提示文字
image: url + '/code.png', // 按钮图标
cmd: 'tdsk_command' // 点击时执行的方法
});
editor.addCommand('tdsk_command', function() {
editor.windowManager.open(
{
title: "Insert Code", // 对话框的标题
file: url + '/mce_code_plugin.htm', // 放置对话框内容的HTML文件
width: 500, // 对话框宽度
height: 400, // 对话框高度
inline: 1 // Whether to use modal dialog instead of separate browser window.
}
);
});
}
});
tinymce.PluginManager.add('specs_code_plugin', tinymce.plugins.specs_code_plugin);

})(jQuery);

弹窗内容

弹窗内容是上面的js加载的一个html文件,这个文件中写你的窗口显示的内容就行了,这些都很简单,这里我就不贴代码了,有点多,我只讲一点国内没人说的内容,国外也很少,我找了好久才找到的。

插入内容到编辑器

window.parent.tinyMCE.activeEditor.execCommand('mceInsertContent', 0, code); //获取内容并插入到编辑器

关闭弹窗

window.parent.tinyMCE.activeEditor.windowManager.close(); //关闭对话框

发送数据到弹窗

在Tinymce编辑器扩展js中使用windowManager.open函数打开窗口时,配置第二个参数即可。

editor.windowManager.open(
{
title: "Insert Code", // 对话框的标题
file: url + '/mce_code_plugin.htm', // 放置对话框内容的HTML文件
width: 500, // 对话框宽度
height: 400, // 对话框高度
inline: 1 // Whether to use modal dialog instead of separate browser window.
},
{
test:'测试数据',
}
);

弹窗接收数据

然后在弹窗内容HTML中的js里接收数据即可。

var args = top.tinymce.activeEditor.windowManager.getParams();
var test = args.test;

发送接收数据的方式与安卓开发中页面间通过intent传递及其相似,国内的教程都不写这个,国外也很少,奇怪了大家都会吗?还是我太蠢了……

人已赞赏
WordPress功能扩展代码

Tinymce编辑器基础功能扩展

2020-5-26 9:49:01

WordPress功能扩展代码

纯代码实现WordPress增加百度快速收录推送

2020-5-26 9:59:24

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索