Tinymce编辑器基础功能扩展

Tinymce作为WordPress的经典编辑器,如何给WordPress的Tinymce编辑器添加功能按钮?Tinymce官方文档中有其功能扩展的详细教程,但在WordPress中应该如何进行扩展呢?下面我们一起来学习下Tinymce编辑器如何扩展功能。

虽说自WordPress5.0起开始支持新的古腾堡编辑器,但更多的人还是习惯Tinymce经典编辑器,并且很多经典编辑器的插件扩展并没有顺利的移植到古腾堡编辑器中。

Tinymce编辑器添加功能按钮

WordPress声明Tinymce扩展

在你的WordPress的functions.php文件中,加入如下代码,用以添加Tinymce扩展声明。

//添加编辑器功能扩展
function dmd_tbk_plugin() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}

if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'dmd_tbk_external_plugins_filter' );
add_filter( 'mce_buttons', 'dmd_tbk_buttons_filter' );
}

}
add_action('admin_head', 'dmd_tbk_plugin');
function dmd_tbk_external_plugins_filter($plugin_array) {
$plugin_array['dmd_tbk_plugin'] =get_bloginfo('template_directory') . "/editor.js";
return $plugin_array;
}
function dmd_tbk_buttons_filter($buttons) {
array_push($buttons, 'dmd_tbk_plugin');

return $buttons;
}

Tinymce接口扩展

然后再创建一个editor.js文件,这个文件将使用Tinymce接口添加按钮。

(function() {
/* Register the buttons */
tinymce.create('tinymce.plugins.MyButtons', {
init : function(ed, url) {
/**
* Inserts shortcode content
*/
ed.addButton( 'button_eek', {
text : 'Insert shortcode',
title : 'Insert shortcode',
onclick : function() {
ed.selection.setContent('[myshortcode]');
}
});
/**
* Adds HTML tag to selected content
*/
ed.addButton( 'button_green', {
text : 'Add span',
title : 'Add span',
cmd: 'button_green_cmd'
});
ed.addCommand( 'button_green_cmd', function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '<h1>' + selected_text + '</h1>';
ed.execCommand('mceInsertContent', 0, return_text);
});
},
createControl : function(n, cm) {
return null;
},
});
/* Start the buttons */
tinymce.PluginManager.add( 'my_button_script', tinymce.plugins.MyButtons );
})();

最简单的点击按钮插入代码功能已经完成了,下一章我们将进行更加高级的交互扩展教程,其中涉及到点击按钮弹窗,并传递数据到该窗口,处理后再返回数据到编辑器中。(本文转载自代码狗

人已赞赏
WordPress功能扩展代码WordPress功能扩展教程

WordPress Tinymce编辑器添加自定义功能按钮

2020-5-25 13:19:53

WordPress功能扩展代码

Tinymce编辑器高级功能扩展

2020-5-26 9:52:15

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