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

2018-03-17

functions.phpでTinyMCEにボタンの追加を定義し、TinyMCEのプラグインの読み込みも定義する。

tinymce-plugin-ruby.jsでボタンの追加を行い、ボタンを押した際のプラグインの動作を実装する。

functions.php

// ボタンの追加
add_filter('mce_buttons', 'register_buttons_insert_ruby');
// add_filter('mce_buttons_2', 'register_buttons_insert_ruby'); 2列目に追加するなら mce_buttons_2
// add_filter('mce_buttons_3', 'register_buttons_insert_ruby'); 3列目に追加するなら mce_buttons_3

function register_buttons_insert_ruby($buttons) {
   array_push($buttons, '', 'insert_ruby');
   return $buttons;
}

// TinyMCEプラグインの追加
add_filter('mce_external_plugins', 'insert_ruby_register_tinymce_javascript');

function insert_ruby_register_tinymce_javascript($plugin_array) {
   $plugin_array['myplugin_script'] = get_template_directory_uri() . '/js/tinymce-plugin-ruby.js';

   return $plugin_array;
}

tinymce-plugin-ruby.js

(function() {
  tinymce.create('tinymce.plugins.MyButtons', {
    init : function(ed, url) {
      ed.addButton('insert_ruby', {title : 'ルビの挿入', image : url + '/editor_icons/ruby.png', cmd: 'insert_ruby_cmd'});
      ed.addCommand('insert_ruby_cmd', function() {
        ed.windowManager.open({
          title: 'ルビの挿入',
          body: [
            { type: 'textbox', name: 'title', label: 'ルビ', value: '' }
          ],
          onsubmit: function(e) {
            var selected_html = ed.selection.getContent();
            if (typeof e.data.title != 'undefined' && e.data.title.length) {
              var text_with_ruby = '<ruby>' + selected_html + '<rp>(</rp><rt>' +  e.data.title  + '</rt><rp>)</rp><ruby>';
              ed.execCommand('mceInsertContent', false, text_with_ruby);
            }
          }
        });
      });
    },
    createControl : function(n, cm) {
      return null;
    },
  });
  tinymce.PluginManager.add('myplugin_script', tinymce.plugins.MyButtons);
})();

残念ながら変更や削除はできないので、修正したい場合はいったんルビの対象の文字列を消して入力し直し、ルビの付いてない状態にしてから再度ルビの挿入を行う。

一応実装は試みたのだが、rubyタグが二重にかかってしまったりして微妙にうまくいかない。また行頭や行末の文字列を対象にするとその文字列自体が消えてしまったりする。
おそらくed.selectionにrubyやpが巻き込まれていないかどうかを見て処理すればいいのかな、という気はするんだけど追いかける気力がない。

参考

Profile

フルスタック気味のフリーランスプログラマー。

どちらかと言うと得意はインフラ構築とサーバーサイドプログラミングですが、フロントエンドもぼちぼちやっています。

最近の興味範囲はWordPress、AWS、サーバーレス、UIデザイン。

愛車はセロー。カメラはペンタックス。旅好きです。横浜在住。