wordpress默认后台文本编辑器如何添加带有插入文本功能的自定义按钮？
wordpress默认的文本编辑器TinyMCE可以自定义一些按钮功能。有时我们在发布文章时需要插入一些固定的内容，比如版权声明，一段固定的代码等，如果每次都要手动输入的话，不仅让人感觉烦躁，而且还影响效率，况且机械性重复同样的动作本就该交给代码处理。因此，我们就可以通过自定义TinyMCE编辑器按钮功能实现插入一段指定的文本或代码。下面小编就把相关的实现方法分享给大家。
实现的效果如下：
编辑器后台“可视化”界面功能面板中多了一个“❤”图标，鼠标放上去显示“插入下载信息框样式”，点击后会插入一个已设置的固定下载样式框。
具体操作如下：
首先，创建一个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后台就可以了。
IT技术资料分享-个人整理自互联网