WordPress后台文本和HTML编辑器及可视化编辑器添加快捷按钮

释放双眼,带上耳机,听听看~!

一、文本编辑器添加按钮方式

//添加文本编辑器自定义快捷标签按钮
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' );

 

二、HTML编辑器添加按钮方式

//添加HTML编辑器自定义快捷标签按钮
add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce($mce_settings) {
?>
<script type="text/javascript">
    QTags.addButton( 'hr', 'hr', "n<hr />n", "" );
    QTags.addButton( 'h1', 'h1', "n<h1>", "</h1>n" );
    QTags.addButton( 'h2', 'h2', "n<h2>", "</h2>n" );
    QTags.addButton( 'h3', 'h3', "n<h3>", "</h3>n" );
    QTags.addButton( 'pre', 'pre', "n<pre>n", "n</pre>n" );
</script>
<?php
}

 

三、可视化编辑器添加按钮方式

1.创建按钮初始函数

//初始化时执行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' );   
    }   
}  

2.注册按钮

/**
 * register_button 添加按钮
 * @param  array $buttons 按钮数组
 * @return array 按钮数组
 */
function register_button( $buttons ) {   
    array_push( $buttons, "pre" ); //创建第一个按钮 pre
    array_push( $buttons, "pre2" ); //创建第二个按钮 pre2,以此类推
    return $buttons;
}

/**
 * @param array $plugin_array 按钮所在的js
 */
function add_plugin( $plugin_array ) {   
   $plugin_array['pre'] = get_bloginfo( 'template_url' ) . '/ni-wpgj/pre.js'; //pre按钮的js路径
   $plugin_array['pre2'] = get_bloginfo( 'template_url' ) . '/ni-wpgj/pre2.js'; //pre2按钮的js路径,以此类推
   return $plugin_array;
}

3.创建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('pre', tinymce.plugins.mybutton); //第一个是脚本名称,第二个是插件名称
})();

js代码中的pre.png文件是编辑器上面显示的图标,可以自行填写地址。

第二步中的按钮js地址,可以一个按钮对应一个js文件,里面就是上述内容,只要更改下对应的脚本名称即可。也可以将多个按钮写在同个js文件,但注意脚本和插件命名都要不同,可参考下图。

740fcd28750fd314ce439f5fcec671c3

温馨提示:本文最后更新于 2022-04-16 04:59 ,某些文章具有时效性,若有错误或已失效,请在下方留言或联系逆念

给TA打赏
共{{data.count}}人
人已打赏
编程开发

WordPress自制插件-免修改主题的function文件增加函数代码以及实现主题自定义CSS和JS样式

2022-4-16 2:04:19

编程开发

【CSS】CSS三个隐藏方法教程display:none_visibility:hidden_overflow:hidden

2022-5-14 4:23:08

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,QQ508044570 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索