wordpress后台编辑器添加按钮

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

 

你可能还喜欢下面这些文章

php开发者的sublime插件和配置

作为一个php开发者,换工作环境的时候可能会重新配置编辑器,这里给出一个比较好的环境(也是我的常用环境)。配置篇每家公司都会有内部的规范,但是只要公司不是特别奇葩,那么规范一般是大同小异。根据规范来设定编辑器,那么写出来的代码则很容易符合规范了。此外,一个设置好的编辑器能够大大提高编码效率!下面是我的配置,可以根据注释自行调整{ // 粗体文本 "bold_folder_labels": true, // 显示所有的空白字符,这样可以看出空格和tab "draw_white_space": "all", // 设置字体 "font_size": 15,

sublime优秀插件推荐

最佳的Sublime Text 插件朋友们你们好!我尝试着收集了最佳的ST插件,这些插件真的会改善你的工作流程。我搜索了很多网站,下面是我的成果。WebInspector在 JavaScript调试方面,这是一个令人惊讶的工具,Sublime上的完整的代码检查工具。功能:使用绝对路径储存在用户设置中的项目断点,控制台,分步和断点调试器,栈追踪。这些都能够很棒的工作!而且Mozilla还提供了一个插件Fireplay让你连接到Firefox 开发工具和最简单的调试器JSHintEmmet编辑器中最流行的插件之一。Emmet,前身Zen Coding也是web开发者提高生产力最有效的方法之一。按下

sublime merge和diff的插件sublimemerge pro

一直使用的是beyond compare这个软件来作为比对和合并工具,不可否认,在用git的时候,配置这款工具比对确实很省事。现在我在用sublime写代码,在写的过程中可能涉及到和以前的代码版本做比对,这个时候还要打开这个软件那可不是我想要干的,插件众多的sublime我想这个比对插件肯定是有的吧,于是就找到了sublimemerge pro这款插件。直接 ctrl + alt + p 输入install package...,搜索sublimemerge,安装即可。如果对安装方法不清楚可以查看sublime安装插件的教程。安装之后会有一个readme,里面介绍了用法,如下  In file

sublime安装package control,让插件安装更简单

package control是什么东东?sublime要如何安装package control呢?且往下看。package control就是sublime的插件管理中心,你可以通过这个东西来安装,更新或者卸载插件。插件能够增强sublime的功能,这个就不废话了安装package control1.使用快捷键 Ctrl+` (这个就是键盘Esc下面的那个), 打开sublime的控制台(这个控制台可以输入并且执行python代码)sublime text3sublime text2手动安装可能由于各种原因,无法使用代码安装,那可以通过以下步骤手动安装Package Control: 点击

序言:我的sublime

多年以前有朋友推荐我用sublime,那大概是2011年的时候吧,我用tango notpad2,曾觉得这是用的最舒服的编辑器,高亮,秒开,太舒服。当我无意中看到好多人在用sublime的时候,我好奇的试一试,这一试,就是几年了,或许我以后也将会一直用下去。开始,相当长的一段时间内仅仅将sublime当做一个编辑器用,我想的是看的舒服,打开快,界面够酷就可以了,而且我用的也确实很舒服。但后来,我觉得要是sublime能够直接f5来运行程序是多方便啊,实际上,这对于sublime就是小case,sublime灵活的配置,快捷键你想怎么定义就怎么定义,只要机器上面安装了编译器或者各种语言的解释器就

centos7系统初初始化工作以及网站环境搭建(php7+nginx+mysql)

拿到一台做网站的主机, 我们先要做一些环境初始化的工作, 由于这些工作会有些繁琐,因此记录一下. 后面将这些流程写成一个shell脚本,一次性完成.此次工作流程如下: 安全性设置 额外的目录创建 网站环境搭建安全性设置一般从某云上买的主机, 默认账户是root, 为了不被暴力破解, 我们首先需要设置一个强一点的密码,不过更好的方法是禁用root, 另外创建一个用户来作为日常管理的账户.第一步: 创建一个新的账户,并且能够切换到root权限比如我的用户名叫xiaobai, 添加用户名就是useradd xiaobai设置密码passwd xiaobai之后输入密码,一个新的账户就设定好了.

让sublime支持c/c++语言的编译

sublime只是一个编辑器,让sublime支持c或者c++则是通过设定sublime快捷键调用相关的命令,达到编辑和执行c代码的目的。首先需要下载一个c语言的编译器,对于 Windows 和 Linux 来说可以采用 gcc 。For Windows:下载安装MinGW,然后在系统环境变量中添加(假设你把 MinGW安装在 C 盘),你安装到哪个路径就写哪个路径,别傻乎乎的直接复制啦,不然没用哦。验证一下是否成功。win+r(win就是徽标),输入cmd,打开cmd窗口之后输入gcc -v看看,如果有gcc的信息说明成功了,如果显示gcc不是内部或外部命令,也不是可运行的程序那就是环境变量

linux下面ftp的搭建

linux下面ftp服务器一般选择vsftpd这个免费开源的ftp程序。主要说一下其安装,配置,启动这些过程。 由于我的是centos系统,只需要使用就可以安装啦 ubuntu用安装完毕之后。首先在linux下面添加一个用户作为ftp用户 useradd –d /var/www/site -g ftp –s /sbin/nologin myftp -s /sbin/nologin 是让其不能登陆系统 -d 是指定用户目录为/var/www ,这里可以替换成任何你需要的目录。 -g ftp 把用户加入到ftp组中(vsftp已创建) myftp是ftp用户名,在配置时把这个myftp换成你的ft

蜘蛛痕迹统计插件,spideranalyse

 做成了独立插件啦,不集成到主题啦,所有主题都能用啦插件github地址:https://github.com/cmhc/spideranalyse/update2015-10-19插件已经提交到wordpress官方,虽然小,也算是一个小小的尝试吧。玩wordpress好多年,还从来没干过,一直都是自娱自乐,有时候还赚点零花钱,说来惭愧。插件地址: https://wordpress.org/plugins/spideranalyse/只有当你的网站被蜘蛛爬行,才会记录日志,因此开始会没有数据的,慢慢等待吧。在使用插件过程中可能会遇到的问题问题收集中。。。 

强化twenty fifteen主题,twenty fifteen pro主题制作过程

被最新的twenty fifteen主题迷上了,这就是我心目中的样式!但有功能还是需要添加的,因此在twenty fifteen的主题基础上,增加了一些功能,命名为twenty fifteen pro主题,目前我所用的主题就是twenty fifteen pro主题。目前增加的功能有这些1.专辑文章将一些文章整个成专辑,比如之前胡超的sublime这个专辑,随便点进去一篇文章,左侧栏都会出现该专辑的系列文章,并且在后台还可以手动控制其排序。这样的好处就是能够将同类别,教程之类的文章聚合起来,更加利于阅读。2.页脚文字增加统计或者版权文字,备案号等等一些附加的信息可能是需要的,但很遗憾twent

赞赏

微信赞赏支付宝赞赏

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注