wordpress编辑器添加自定义按钮

Home / Article MrLee 2015-8-8 3135

wordpress默认编辑器的按钮比较少,包含字体加粗,斜体,ul ,li等html标记按钮,不过对一般需求也够用了。

20150808174125


不过我们经常需要一些自定义的按钮来减少编辑文章时需要的一些特殊标记,wordperss默认编辑器的按钮是可控的,添加自定义按钮方法如下: 1、打开你主题的functions.php文件,添加如下代码:
//初始化时执行myhtml_button函数
add_action('init', 'mylink_button');
function mylink_button() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'add_plugin' );
add_filter( 'mce_buttons', 'register_button' );
}
}
//add_filter过滤器中的两个函数定义
function register_button( $buttons ) {
array_push( $buttons, "|", "mylink" );
return $buttons;
}
function add_plugin( $plugin_array ) {
//这里你可以自定义添加js与css文件
$plugin_array['mylink'] = get_bloginfo( 'template_url' ) . '/js/mycustomer.js'; //mylink按钮的js路径,
return $plugin_array;
}
?>

2、打开你主题的js目录添加自定义mycustomer.js文件,代码如下:
(function() {
tinymce.create('tinymce.plugins.mylink', {
init : function(ed, url) {
ed.addButton('mylink', {
title : 'My Link',
image : url+'/../images/link.png', //按钮图片路径
onclick : function() {
ed.selection.setContent('[mylink]' + ed.selection.getContent() + '[/mylink]');//自定义插入的内容
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('mylink', tinymce.plugins.mylink);
})();

K!最后我们刷新后台看看效果,自定义按钮出来了:

zdyann

本文链接:https://www.it72.com/4510.htm

推荐阅读
最新回复 (0)
返回