通常直接在wordpress文章编辑的可视化模式中直接插入代码,发布后的代码会丢失所有缩进信息,这是因为wpeditor会自动处理掉这些没必要的缩进,十分影响代码发布的美观。当然,你可能也有办法解决,那就是去文章编辑的文本模式里插入代码,还能顺带加上代码高亮所需要的标签。不过,这种方式会产生一定的风险,那就是代码转义的问题。在文本模式插入的代码不会自动转义,后果就是部分语言的代码,比如html、php、js等会在过程中直接运行起来,从而影响了最后的显示效果。

本文通过在可视化文章编辑模式下添加一个插入按钮,来实现保留代码缩进、对代码进行转移、以及给代码增加相应的高亮标签的功能(代码着色高亮需要主题集成JS,比如PrismSyntaxHighlighterHighlight.js等,或者使用插件),从此再也不用为代码显示问题而发愁了。

先看下效果图吧

insert-code1

insert-code2

insert-code3

insert-code4

可以发现,插入的代码添加了缩进,以及自动添加了高亮标签,高亮的语言是可以在添加时选择的,便于适配不同的语言。

接下来是添加按钮的方法:

1、首先在WP主题的function.php文件里添加以下函数,功能分别是初始化按钮、添加按钮和引入按钮js文件。

//添加代码插入按钮
add_action('admin_init', 'insert_code_button');
function insert_code_button(){
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
            return;
    }
    add_filter( 'mce_external_plugins', 'add_highlight_button_plugin' );
    add_filter( 'mce_buttons', 'register_highlight_button' );
}
function register_highlight_button( $buttons ) {
    array_push( $buttons, "|", "highlight" );
    return $buttons;
}
function add_highlight_button_plugin(){
    $plugin_array['highlight'] = get_bloginfo( 'template_url' ) . '/js/highlight.js';
    return $plugin_array;
}

2、接下来创建对应的js文件,命名为"highlight.js"(上面函数默认js文件放在主题目录下的js文件夹),js代码如下:

(function() {

var boxStyle = '.highlighter-code-box {\
    background: #F1F1F1;\
    position: fixed;\
    left: 50% ;\
    top: 50% ;\
    border: 1px solid #999;\
    width: 460px;\
    height: 420px;\
    margin: -210px 0 0 -230px;\
    line-height: 25px;\
    border-radius: 3px 3px 0 0;\
    z-index:9999;\
}\
.highlighter-code-box-title{\
    height: 25px;\
    background: #444;\
    color: #fff;\
    text-align: center;\
\
    vertical-align: baseline;\
    font-family: Arial,Verdana;\
    font-size: 11px;\
    \
}\
.highlighter-code-box-toolbar{\
    padding: 5px 15px;\
}\
.highlighter-code-input{\
    width: 430px;\
    height: 310px;\
    font-family: "Courier New", Courier, mono;\
    font-size: 12px;\
    border: 1px solid #DFDFDF;\
    margin: 0 auto;\
    display: block;\
    resize: none;\
}\
.highlighter-code-box-bottombar{\
    text-align: right;\
    padding: 5px 15px;\
}\
.highlighter-code-box-bottombar input{\
    border: 1px solid #BBB;\
    margin: 0;\
    padding: 0 0 1px;\
    font-weight: bold;\
    font-size: 11px;\
    width: 94px;\
    height: 24px;\
    color: black;\
    cursor: pointer;\
    border-radius: 3px;\
    background-color: #EEE;\
    background-image: -ms-linear-gradient(bottom, #DDD, white);\
    background-image: -moz-linear-gradient(bottom, #DDD, white);\
    background-image: -o-linear-gradient(bottom, #DDD, white);\
    background-image: -webkit-gradient(linear, left bottom, left top, from(#DDD), to(white));\
    background-image: -webkit-linear-gradient(bottom, #DDD, white);\
    background-image: linear-gradient(bottom, #DDD, white);\
}\
.highlighter-code-box-bottombar input:hover{\
    border: 1px solid #555;\
}';

var boxTemplate = '\
<div class="highlighter-code-box-title">Insert Code</div>\
<div class="highlighter-code-box-toolbar">\
    <label>language: <select id="codeLanguage">\
</select>\
</label>\
</div>\
<textarea id="codeInput" class="highlighter-code-input" ></textarea>\
<div class="highlighter-code-box-bottombar">\
    <input id="codeCancelButton" type="button" value="Cancel">\
    <input id="codeInsertButton" type="button" value="Insert">\
</div>';

var languages = {  //此处可根据不同高亮插件修改成不同的高亮标签
    Markup:     'markup',
    Css:     'css',
    Clike:   'clike',
    JavaScript: 'javascript',
    CSharp:  'csharp',
    Php:     'php',
    None:     'none'
}

var codeBox = {
    create: function() {
        var styleNode = document.createElement('style');
        styleNode.innerHTML = boxStyle;
        document.getElementsByTagName('head')[0].appendChild(styleNode);
        
        this._dom = document.createElement('div');
        this._dom.setAttribute('class' , 'highlighter-code-box');
        this._dom.innerHTML = boxTemplate;
        document.body.appendChild(this._dom);
        this._init = true;
        var that = this;
        var language = this.language = document.getElementById('codeLanguage');
        var textarea = this.textarea = document.getElementById('codeInput');
        var cancel = document.getElementById('codeCancelButton');
        var insert = document.getElementById('codeInsertButton');
        var html = '';
        for(var i in languages){
            html += '<option value="' + languages[i] + '">' + i + '</option>';
        }
        language.innerHTML = html;
        cancel.onclick = function(){
            that.hide();
        }
        insert.onclick = function(){
            var text = textarea.value;
            var lan = language.value;
            var label = language.options[language.selectedIndex].innerHTML;
            text = text.replace(/&/g, '&amp;');
            text = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
            text = '<pre><code class="language-' + lan + '">' + text + '</code></pre>';
            //上面这句也应该根据不同高亮插件修改不同class格式
            that._action && that._action(text);
            that.hide();
            if(localStorage){
                localStorage['lastLanguage'] = lan;
            }
        }
    },
    show: function(action) {
        if (!this._init) {
            this.create();
        }
        this.textarea.value = '';
        this._action = action;
        if(localStorage && localStorage['lastLanguage']){
            this.language.value = localStorage['lastLanguage'];
        }
        this._dom.style.display = 'block';
    },
    hide: function(){
        this._action = null;
        this._dom.style.display = 'none';
    }
};

tinymce.create('tinymce.plugins.highlight', {
    init : function(ed, url) {
        ed.addButton('highlight', {
            title : 'highlight',
            text : 'Insert Code',
            onclick : function() {
              codeBox.show(function(text){
                ed.selection.setContent(ed.selection.getContent() + text );
              });
            }
        });
    },
    createControl : function(n, cm) {
        return null;
    },
});
tinymce.PluginManager.add('highlight', tinymce.plugins.highlight);

})();

3、以上js文件内容有两处需要根据不同插件格式自行修改(已标注),然后把js放入对应目录。

4、没有下一步啦,按钮已经做好了,你可以大胆的插入你的代码咯!不会有任何问题。

本文标签 : # # # #
分享到: