wordpress编辑器自定义按钮的添加方法

十一月 06
磊子 2011年 10 条评论

本来今天想说下我网站上jquery+ajax 登录的方法来着,所以下午一直在捣腾语法高亮的插件,之前在官网看了一款叫 Easy Google Syntax Highlighter 感觉这款挺不错的,代码的样式挺好看,但是唯一的不足之处就是需要手写才行,感觉很不方便,于是就想着在编辑器上面加一个按钮出来,在加上弹出框选择好语言填上代码后可以自己显示在编辑器中,这样岂不很方便。于是就在网上搜关于添加按钮的方法,可是找的内容都是要修改wp-includes下面的文件的,这样岂不很麻烦。所以我还是从插件入手找了一个叫 WP SyntaxHighlighter (怪自己没有在往下找,其实还有比这个更好的,后来重新搜的时候才发现。杯具。。。)这款插件在编辑器上面有按钮生成。我就纳闷了,人家这个就不用修改代码什么的,就这样通过这款插件结合官网提供的资料。给编辑加按钮其实是挺简单的事情。所以今天为大家讲下这个方法。

wordpress 后台编辑器是用一个叫 TinyMCE 这款编辑器做出来的,我们可以看到在wp-includes->js->tinymce 这个文件下有一些相关的文件,而这些文件是我完全可以利用起来的。比如 tiny_mce_popup.js 这个文件可以为我们实现弹出框的效果。那我们怎么实现添加按钮呢?我把代码给大家贴出来:

第一个文件我们命名为lei_mceplugin_index.php

/*
Plugin Name: Lei_Tiny Plugin
Plugin URI: http://www.favortt.com
Description: Add Simple button to TinyMCE editor.
Author: Lei zi
Version: 1.0.0
Author URI: http://www.favortt.com
*/
add_filter('mce_external_plugins',"tinyplugin_register");
add_filter('mce_buttons', 'tiny_add_button'); 

function tiny_add_button($buttons)
{
    array_push($buttons, "tinyplugin");
    return $buttons;
}

function tinyplugin_register($plugin_array)
{
    $url = trim(get_bloginfo('url'), "/")."/wp-content/plugins/lei_tinymce_plugin/lei_edit_plugin.js";
    $plugin_array['tinyplugin'] = $url;
    return $plugin_array;
}

然后是js文件命名为lei_edit_plugin.php:

function tinyplugin() {
    return "[tiny-plugin]";
}

(function() {

    tinymce.create('tinymce.plugins.tinyplugin', {

        init : function(ed, url){
            ed.addButton('tinyplugin', {
                title : 'Insert TinyPlugin',
                onclick : function() {
                    ed.execCommand(
                        'mceInsertContent',
                        false,
                        tinyplugin()
                        );
                },
                image: url + "/wand.png" //这个是显示编辑器上的图片。换成自己的就好了。
            });
        },

        getInfo : function() {
            return {
                longname : 'Contnet Mage plugin',
                author : 'Grzegorz Winiarski',
                authorurl : 'http://ditio.net',
                infourl : '',
                version : "1.0"
            };
        }
    });

    tinymce.PluginManager.add('tinyplugin', tinymce.plugins.tinyplugin);

})();

就这个两个文件。然后然后放在文件名为:lei_tinymce_plugin还有你需要显示的按钮图片,就可以显示按钮了,是不是很简单,呵呵! 不过这个只是怎么显示按钮,今天把那两个语法插件整合成了一个轻量级的插件。下一篇我就根据这个案例来给大家讲一下插件的大概流程。今天就说下,这个吧! 大家试试如果有什么好的建议和方法,欢迎大家提出来!

» 版权所有©转载必须以链接形式注明作者和原始出处:磊子的博客 » wordpress编辑器自定义按钮的添加方法
» 地址:( Ctrl+C 复制 )
» 如果对本站感兴趣,请到网站右下方订阅本站,将为你带来更多精彩和实用的文章
» 如果您对这篇文章感兴趣,不妨小小的 捐助(Donate)一下博主吧,不管多少都是对博主最大的支持和鼓励哟,博主-磊子感谢大家的支持!!!

10 条留言 其中:访客:6 条, 博主:4 条

  1. 你写的东西很给力!…超喜欢加我友情链接吧..!www.iiexe.com

  2. 夜光说:

    换个代码高亮插件吧,这个复制时连行号都下来了,很不方便,奇怪,这个插件看起来挺精致的,怎么会有这个问题呢~

  3. 我来淘宝的

  4. wp帅哥说:

    越来越佩服你了 :roll:

  5. 好吧!承认你写的东西太有深度,我总是需要反复去实践一下子才能解决的! :razz:

说点什么吧




wireless earbuds moscow mule mugs bluetooth speakers waterproof camera best wireless earbuds best vacuum cleaner best drugstore foundation best dishwasher best waist trainer wireless headphones best vacuum 0594918 best bluetooth earbuds waterproof bluetooth speaker tattoo cover up action camera
订阅本站