在functions.php文件里面添加:

add_action( 'admin_init', 'my_tinymce_button' );

function my_tinymce_button() {
if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {
add_filter( 'mce_buttons', 'my_register_tinymce_button' );
add_filter( 'mce_external_plugins', 'my_add_tinymce_button' );
}
} function my_register_tinymce_button( $buttons ) {
array_push( $buttons, "button_eek", "button_green" );
return $buttons;
} function my_add_tinymce_button( $plugin_array ) {
$plugin_array['my_button_script'] = get_bloginfo('template_directory') . "/editor.js";
return $plugin_array;
}

在你主题文件夹里面创建一个js文件,命名为editor.js

(function() {
/* Register the buttons */
tinymce.create('tinymce.plugins.MyButtons', {
init : function(ed, url) {
/**
* Inserts shortcode content
*/
ed.addButton( 'button_eek', {
text : 'Insert shortcode',
title : 'Insert shortcode',
onclick : function() {
ed.selection.setContent('[myshortcode]');
}
});
/**
* Adds HTML tag to selected content
*/
ed.addButton( 'button_green', {
text : 'Add span',
title : 'Add span',
cmd: 'button_green_cmd'
});
ed.addCommand( 'button_green_cmd', function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '<h1>' + selected_text + '</h1>';
ed.execCommand('mceInsertContent', 0, return_text);
});
},
createControl : function(n, cm) {
return null;
},
});
/* Start the buttons */
tinymce.PluginManager.add( 'my_button_script', tinymce.plugins.MyButtons );
})();

效果如图:

原文:http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_external_plugins

黄聪:wordpress如何扩展TinyMCE编辑器,添加自定义按钮及功能的更多相关文章

  1. Tinymce 编辑器添加自定义图片管理插件

    在使用Tinymce的过程中需要用到图片上传功能,而提供的上传插件在上传文件后是给了一个连接地址,就想用户需要什么图片,不能用最直观的方式表现出来么! 虽然官网上也有一个文件管理的插件moxieman ...

  2. 黄聪:chrome扩展开发《AJAX请求》

    chrome在一次更新之后,出于安全考虑,完全的禁止了content_script从https向http发起ajax请求,即使正常情况下也会在console里给出提示.这对于WEB来讲是好事,但对于扩 ...

  3. 黄聪:如何扩展Chrome DevTools来获取页面请求

    1. Chrome DevTools Extension 熟悉React的同学,可能对React Developer Tools并不陌生,     刚看到的时候,我也觉得很神奇, 因为React De ...

  4. WordPress TinyMCE 编辑器增强技巧大全

    说到WordPress自带的TinyMCE 编辑器,有些国人总是不太满意.针对这个情况,倡萌已经介绍了一些增强或替代的方法: WordPress编辑器增强插件:TinyMCE Advanced Wor ...

  5. 黄聪:《跟黄聪学WordPress插件开发》

    续<跟黄聪学WordPress主题开发>之后,又一个作品完成!<跟黄聪学Wordpress插件开发>,国内最好的Wordpress插件开发视频教程!! 目录预览: WordPr ...

  6. 黄聪:TinyMCE 4 增强 添加样式、按钮、字体、下拉菜单和弹出式窗口

    我最喜欢 WordPress 3.9 的更新是使用了 TinyMCE 4.0 编辑器.新的 TinyMCE 看起来看起来更整洁(真正匹配WP仪表板),它有一些非常不错的附加功能.我的很多老主题和插件必 ...

  7. 黄聪:《跟黄聪学WordPress主题开发》

    又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...

  8. 黄聪:wordpress教程

    又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...

  9. 黄聪:如何使用Add-on SDK开发一个自己的火狐扩展

    火狐开放了扩展的开发权限给程序员们,相信很多人都会希望自己做一些扩展来方便一些使用. 我最近做一些项目也需要开发一个火狐扩展,方便收集自己需要的数据,因此研究了几天怎么开发,现在已经差不多完成了,就顺 ...

随机推荐

  1. ZOJ 1005 Jugs

    原题链接 题目大意:有一大一小两个杯子,相互倒水,直到其中一个杯子里剩下特定体积的水.描述这个过程. 解法:因为两个杯子的容积互质,所以只要用小杯子不断往大杯子倒水,大杯子灌满后就清空,大杯子里迟早会 ...

  2. 图像质量评价指标之Matlab实现

    在图像处理算法研究中,很多时候需要有客观评价指标来对算法的性能进行评价. 比如,在图像复原.图像滤波算法研究中,需要采用客观评价指标来定量的来测试算法恢复出的图像相对于参考图像的好坏程度. 本文介绍文 ...

  3. C++ Primer : 第十一章 : 关联容器之概述、有序关联容器关键字要求和pair类型

    标准库定义了两种主要的关联容器:map和set map中的元素时一些关键字-值(key-value)对,关键字起到索引的作用,值则表示与索引相关的数据.set中每个元素只包含一个关键字,可以完成高效的 ...

  4. Apache脚本路径别名(CGI接口)

    CGI:Common Gateway Interface(通用网关接口)使WEB可以跟一个应用程序进行通信,从通信环境中获得结果. CGI是不安全的,需要mod_alias,mod_cgi模块 Scr ...

  5. CDH hadoop的安装

    1 先拷贝tar包到目录底下(tar 包解压 tar zxvf) 2 : 1.使用课程提供的hadoop-2.5.0-cdh5.3.6.tar.gz,上传到虚拟机的/usr/local目录下.(htt ...

  6. poj1680 最短路判环

    题意:有多个银行可以换钱,每个银行可以将特定的两种钱相互兑换,并且有自己的汇率,现在问是否可以将自己的钱通过银行兑换增加. 其实比较水,主要就是知道最短路问题里的负环可以通过bellman-fold或 ...

  7. kuangbin_ShortPath P (HDU 4725)

    很有挑战的一题 直接暴力建图的话毫无疑问O(n^2)会TLE 每层虚拟一个点又会让没有点的层也能连过去 参考kuangbin菊苣的方法每层用了两个虚拟点 n+i*2-1 是入口 n+i*2 是出口 然 ...

  8. VC++多线程编程

    一.问题的提出 编写一个耗时的单线程程序: 新建一个基于对话框的应用程序SingleThread,在主对话框IDD_SINGLETHREAD_DIALOG添加一个按钮,ID为IDC_SLEEP_SIX ...

  9. 视图缩放、移动、旋转--ios

    UIView *view=[[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)]; view.backgroundColor=[UICo ...

  10. 自然语言处理3.3——使用Unicode进行文字处理

    全世界有多种语言,经常需要应用程序处理不同的语言和字符集.下面将介绍如何利用Unicode处理使用非ASCII字符集文字. 1.什么是Unicode Unicode支持一百万种以上的字符,每一个字符分 ...