本来今天想说下我网站上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还有你需要显示的按钮图片,就可以显示按钮了,是不是很简单,呵呵! 不过这个只是怎么显示按钮,今天把那两个语法插件整合成了一个轻量级的插件。下一篇我就根据这个案例来给大家讲一下插件的大概流程。今天就说下,这个吧! 大家试试如果有什么好的建议和方法,欢迎大家提出来!