增强wordpress编辑器是必要的,因为有的只是一些基础的按钮,比如我想要使用pre标签的按钮就没有
function tt_add_quicktags() { ?> <script type="text/javascript"> QTags.addButton( 'pre', 'pre', '<pre>\n','\n</pre>' ); </script> <?php } add_action('admin_print_footer_scripts', 'tt_add_quicktags' );
上面的代码仅仅是添加了quicktags的快捷按钮,也就是后台编辑器切换到文本时候的按钮,在可视化里面并没有,这写文章不太爽还得来回切换。下面代码吧按钮加在可视化里面
//初始化时执行add_editor_button函数 add_action('init', 'add_editor_button'); function add_editor_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' ); } } /** * register_button 添加按钮 * @param array $buttons 按钮数组 * @return array 按钮数组 */ function register_button( $buttons ) { array_push( $buttons, "pre" ); //添加 一个pre按钮 return $buttons; } /** * @param array $plugin_array 按钮所在的js */ function add_plugin( $plugin_array ) { $plugin_array['mybutton_script'] = get_bloginfo( 'template_url' ) . '/js/editor_button.js'; //pre按钮的js路径 return $plugin_array; }
js放在主题里面的js文件夹里面
(function() { tinymce.create('tinymce.plugins.mybutton', { //mybutton是插件名称 init : function(ed, url) { ed.addButton('pre', { //pre是按钮名称 title : 'pre标签', image : url + '/pre.png',//注意图片的路径 url是当前js的路径 onclick : function() { var selected_text = ed.selection.getContent(); ed.selection.setContent('<pre>'+selected_text+'</pre>'); //插入编辑器的内容 } }); }, createControl : function(n, cm) { return null; }, }); tinymce.PluginManager.add('mybutton_script', tinymce.plugins.mybutton); //第一个是脚本,第二个是插件 })();
另外pre.png你需要自己去找啦,也是放在js的文件夹下面
赞赏
微信赞赏
支付宝赞赏