WPのビジュアルエディタにボタンを追加する

WPのビジュアルエディタ（TinyMCE）にオリジナルのボタンが必要になったので調べた。

別にプラグインでもいいと思う

「AddQuicktag」とかあるし、別にそれを使うってのもいいと思うんだけど、今回はビジュアルエディタ上にボタンを表示させたかったので自力で。（確かAddQuickTagはHTMLエディタの方じゃないと出てこないよね、確か）

まずはadd_action

mce_external_pluginsアクションでJSファイルを追加する。ボタンの詳細はこのJS内に書くことになる。それとmce_buttonsでボタンの表示リストみたいなの（よく分かってない）にボタンを追加しておく。
以下はシンプルな「文字サイズ（大）」と「文字サイズ（小）」を追加する例。

add_action('init', 'add_custom_editor_buttons');

function add_custom_editor_buttons() {
    add_filter('mce_external_plugins', 'add_fontsize_buttons');
    add_filter('mce_buttons', 'register_fontsize_buttons');
}

function add_fontsize_buttons( $plugin_array ) {
    $plugin_array['fontsize'] = TEMPLATEPATH.'/js/font-size-plugin.js';

    return $plugin_array;
}

function register_fontsize_buttons( $buttons ) {
    array_push($buttons, 'font_size_big', 'font_size_small');

    return $buttons;
}

JSでボタンを追加

mce_external_pluginsアクションで追加したJSにボタンの仕様などを書く。

(function() {
    tinymce.create('tinymce.plugins.FontSize', {
        init: function(editor, url) {
            var path = url.split('/');
            var pathStr = '';
            for(var i = 0, len = path.length; i < len; i++){
                if(i == path.length-1){
                    pathStr += 'img';
                    break;
                }
                pathStr += path[i]+'/';
            }

            editor.onNodeChange.add(function(editor, cm, node){
                var _c = editor.selection.getContent();
                cm.setDisabled('font_size_big', !_c);
                cm.setDisabled('font_size_small', !_c);
            });

            editor.addButton('font_size_big', {
                title: '文字サイズ（大）',
                cmd: 'font_size_big',
                disabled: true,
                image: pathStr+'/big.png'
            });

            editor.addButton('font_size_small', {
                title: '文字サイズ（小）',
                cmd: 'font_size_small',
                disabled: true,
                image: pathStr+'/small.png'
            });

            editor.addCommand('font_size_big', function(){
                var selected_text = editor.selection.getContent();
                var return_text = '<span class="f-big">' + selected_text + '</span>';
                editor.execCommand('mceInsertContent', 0, return_text);
            });

            editor.addCommand('font_size_small', function(){
                var selected_text = editor.selection.getContent();
                var return_text = '<span class="f-small">' + selected_text + '</span>';
                editor.execCommand('mceInsertContent', 0, return_text);
            });
        },

        createControl : function(n, cm) {
            return null;
        },

        getInfo : function() {
            return {
                longname : 'フォントサイズ',
                author : 'manulneko',
                authorurl : 'http://techapi.manulneko.com',
                version : "0.1"
            };
        }
    });

    tinymce.PluginManager.add('fontsize', tinymce.plugins.FontSize);
})();

3行目、「init」のところでボタンを追加したり、ボタンの挙動を設定したりできる。
「editor.addButton」でボタンを追加する。設定できるオプションはhttp://www.tinymce.com/wiki.php/api4%3aclass.tinymce.ui.Buttonに全部書いてある。

今回は15行目で、文字を選択している状態でのみボタンがアクティブになるようにしてみた。
選択している文字列はeditor.selection.getContent()で取得できる。