让代码更简单

当前位置:代码狗 > WordPress > WP建站 > 正文

WordPress经典编辑器Tinymce高级功能扩展

重要:本文最后更新于2020-03-17 08:14:09,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

前面写了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传递及其相似,国内的教程都不写这个,国外也很少,奇怪了大家都会吗?还是我太蠢了……

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论 1

  1. #1

    能不能写图文教程?

    缙哥哥3周前 (03-17)回复
×

请作者吃根烤肠!

支付宝