wordpress后台编辑器添加自定义标签按钮

Wordpress 思享 502浏览

增强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的文件夹下面

推荐阅读

WordPress4.9分支最新版更新至4.9.26

WordPress其实很早之前就已经更新到6.x版本了,不过本博客一直使用4.9分支。幸运的是,这个版本的分支仍在更新中。该版本已于2024年1月31日更新至4.9.25版本。 下载链接 [下载]https://cn.wordpress.......

纯代码实现wordpress附件页面重定向到文章或首页

前几天发现wordpress网站有评论留言的回顾。结果一看就是附件页面的垃圾评论。这才发现原来wordpress上传的附件也会有对应的页面。难怪之前收录了很多附件页面,但是我的机器人禁止了,忘记了。本来以为会禁用,结果只找到了在线使用插件的方法。最后......

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘fake_update_callback’

这是当一个被挂钩的函数名与挂钩关联不匹配时…这可能发生在重命名一个函数时,而不是在挂钩关联中重命名函数名时。如果强迫症受不了wordpress的主题提示,可以使用插件WP降级将版本设置为当前版本。...