前面写了WordPress经典编辑器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传递及其相似，国内的教程都不写这个，国外也很少，奇怪了大家都会吗？还是我太蠢了……
评论 （1）