wordpress默认后台文本编辑器如何添加带有插入文本功能的自定义按钮?

  • 内容
  • 评论
  • 相关

wordpress默认后台文本编辑器如何添加带有插入文本功能的自定义按钮?

wordpress默认的文本编辑器TinyMCE可以自定义一些按钮功能。有时我们在发布文章时需要插入一些固定的内容,比如版权声明,一段固定的代码等,如果每次都要手动输入的话,不仅让人感觉烦躁,而且还影响效率,况且机械性重复同样的动作本就该交给代码处理。因此,我们就可以通过自定义TinyMCE编辑器按钮功能实现插入一段指定的文本或代码。下面小编就把相关的实现方法分享给大家。

实现的效果如下:

01

编辑器后台“可视化”界面功能面板中多了一个“❤”图标,鼠标放上去显示“插入下载信息框样式”,点击后会插入一个已设置的固定下载样式框。

具体操作如下:

首先,创建一个js文件,并用文本编辑器打开输入以下代码:

(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton('my_mce_button', {
text: !1,
icon: "my_mce_button dashicons-before dashicons-heart",
tooltip:"插入下载信息框样式 ",
onclick: function() {
editor.insertContent('<table><tbody><tr><td>下载地址:</td><td>download id="1632"</td></tr><tr><td>文件大小:</td><td>1.23MB</td></tr></tbody></table>');
}
});
});
})();

将其保存并命名为downstyle.js文件,注意文件编码格式为utf-8,避免出现中文乱码,然后将downstyle.js文件上传至服务器当前主题目录下的/js/文件夹下。位置在/wp-content/themes/当前主题/js

这里讲一下:

接下来定位到当前主题的functions.php文件,打开并添加以下代码:

/**
*
*编辑器自定义按钮功能—插入指定的文本 start
*
**/
// 挂载函数到正确的钩子
function my_add_mce_button() {

// 检查用户权限
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return;
}

// 检查是否启用可视化编辑
if ( 'true' == get_user_option( 'rich_editing' ) ) {
add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
add_filter( 'mce_buttons', 'my_register_mce_button' );
}
}
add_action('admin_head', 'my_add_mce_button');

// 声明新按钮的脚本
function my_add_tinymce_plugin( $plugin_array ) {
$plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/downstyle.js';
return $plugin_array;
}

// 在编辑器上注册新按钮
function my_register_mce_button( $buttons ) {
array_push( $buttons, 'my_mce_button' );
return $buttons;
}

/**
*
*编辑器自定义按钮功能—插入指定的文本 end
*
**/

 

保存覆盖上传至服务器

刷新wordpress编辑器后台会发现已经多了一个“❤”图标了。

如果要实现多个插入文本按钮功能呢?

我们只需依次创建多个js文本,并上传至主题/js/目录下,然后通过 my_add_tinymce_plugin($plugin_array) 函数和my_add_tinymce_plugin( $plugin_array )函数声明注册相应的功能按钮就可以了。

以上图中的span_style按钮为例,首先创建一个span-style-button.js文件,添加相应代码并上传至/js/目录下,

然后在functions.php找到my_add_tinymce_plugin($plugin_array){}增加

$plugin_array['span_style_button'] = get_template_directory_uri() .'/js/span-style-button.js';

my_add_tinymce_plugin( $plugin_array){} 增加

array_push( $buttons, 'span_style_button' );

保存并重新覆盖上传至服务器,刷新wordpress后台就可以了。

02

 

IT技术资料分享-个人整理自互联网

 

上一篇: 下一篇:
关注本站微信公众号


仍未解决?点击远程协助
win10纯净版系统安装教程
关闭
关注本站

扫一扫,关注本站微信公众号