WordPress のビジュアルエディタ TinyMCE に関するメモ

2014年6月13日

WordPress のビジュアルエディタ（ビジュアルリッチエディター） TinyMCE のカスタマイズ等に関する個人的なメモ。

エディタスタイルシート

ビジュアルエディタはテンプレートとスタイルが違うので、テンプレートと同じスタイルを適用できるようにエディタスタイルシートを有効にする。

以下を function.php に記述。

// 管理画面（ビジュアルエディタ）にオリジナルのスタイルを適用
add_editor_style('editor-style.css');

エディタスタイルシートを有効にすると、テーマフォルダ内の editor-style.css が編集画面の本文に適用されるようになるのでテーマフォルダ内に editor-style.css というファイルを作成する。

但し、クラスや ID で指定していない要素はスタイルを指定できないので、以下のようにして「editor-area」というクラスを指定しておくと良い。

functions.php

function custom_editor_settings( $initArray ){
  $initArray['body_class'] = 'editor-area';
  return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

出力されるビジュアルエディタの body 要素の例。（editor-area が追加されている）

<body id="tinymce" class="mce-content-body editor-area mceContentBody wp-editor html4-captions" onload="window.parent.tinymce.get('content').fire('load');" contenteditable="true">

editor-style.css の例

.mceContentBodyはビジュアルエディタ（ TinyMCE）のbody要素専用のCSSクラス
alignleft, aligncente, alingright は画像を挿入する際、画像の配置（左、中央、右）を指定した場合に付くクラス
wp-caption, wp-captin-text は画像を挿入する際、画像にキャプションをつけた場合に付くクラス

editor-style.css

@charset "utf-8";

body.mceContentBody {
    font-size: 12px;
    font-family: "メイリオ",Meiryo,Osaka,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  max-width: 600px;
}

.editor-area a {
  color: green;
  text-decoration: underline;
}

.editor-area p {
  margin: 0 0 1em 0;
}

p.wp-caption-text {
  margin: 0;
}

.alignleft {
  display: block;
  float: left;
  margin-right: 10px;
  margin-bottom: 1em;
}
.aligncenter {
  display: block;
  margin:0 auto;
}
.alignright {
  display: block;
  float: right;
  margin-left: 10px;
  margin-bottom: 1em;
}

.clear {
  clear: both;
}

.space1em {
  clear: both;
  height: 1em;
}

.space2em {
  clear: both;
  height: 2em;
}

スタイルが反映されない場合

editor-style.css を設定してもスタイルが反映されない場合は、ブラウザのキャッシュをクリアしてみる。

ビジュアルエディタにボタンを追加

ボタンを追加するには、functions.php に以下のコードを記述。（「背景色」と「hr タグ」のボタンを追加する例）

functions.php

// ビジュアルエディタにボタンを追加
function add_mce_extrabuttons($buttons){
  array_push($buttons, "backcolor", "hr");
  return $buttons;
}
add_filter("mce_buttons", "add_mce_extrabuttons");

追加できるボタンは以下のようなものがある（他にもあると思います）。

“backcolor”：背景色
“copy”：コピー
“cut”：切り取り
“paste”：貼り付け
“fontsizeselect”：フォントサイズ
“fontselect”：フォントファミリー
“hr”：hrタグ
“styleselect”：スタイル（フォーマット）
“undo”：取り消し
“redo”：やり直し

ビジュアルエディタにカスタムボタンを追加

以下ののサイトを参考にさせていただきました。

editor_plugin.js という Javascript ファイルを作成して保存（この例ではオリジナルのテーマフォルダ内の「js」というフォルダに保存）。

以下はフロートを解除したりする３つのボタンを追加する例。

editor_plugin.js

(function() {
  tinymce.create('tinymce.plugins.myButtons', {//プラグイン関数名
    getInfo : function() {//プラグイン情報
    return {
      longname : 'WDL myButtons',
      author : 'WDL',
      authorurl : 'https://www.webdesignleaves.com',
      infourl : 'https://www.webdesignleaves.com',
      version : "0.1"
      };
    },
    init : function(ed, url) {
      var t = this;
      t.editor = ed;
      //追加する1つ目のボタン
      ed.addCommand('Div_01',//コマンドID
        function() {
        var str = t._MyDiv01();
        ed.execCommand('mceInsertContent', false, str);
      });
      ed.addButton('Div_01', {//ボタンの名前
        title : 'フロートクリア', //tileのテキスト
        cmd : 'Div_01', //コマンドID
        image : url + '/images/mce_btn01.png' //ボタン画像(js/images)
      });
      //追加する2つ目のボタン
      ed.addCommand('Div_02',//コマンドID
        function() {
        var str = t._MyDiv02();
        ed.execCommand('mceInsertContent', false, str);
      });
      ed.addButton('Div_02', {//ボタンの名前
        title : '1行分スペース', //tileのテキスト
        cmd : 'Div_02', //コマンドID
        image : url + '/images/mce_btn02.png' //ボタン画像(js/images)
      });
      //追加する3つ目のボタン
      ed.addCommand('Div_03',//コマンドID
        function() {
        var str = t._MyDiv03();
        ed.execCommand('mceInsertContent', false, str);
      });
      ed.addButton('Div_03', {//ボタンの名前
        title : '2行分スペース', //tileのテキスト
        cmd : 'Div_03', //コマンドID
        image : url + '/images/mce_btn03.png' //ボタン画像(js/images)
      });
    },
    //追加する1つ目のボタンで挿入する内容（HTML）
    _MyDiv01 : function(d, fmt) {//挿入する HTML
      str = '<div class="clear"></div><br>';
      return str;
    },
    //追加する2つ目のボタンで挿入する内容（HTML）
    _MyDiv02 : function(d, fmt) {//挿入する HTML
      str = '<div class="space1em"></div><br>';
      return str;
    },
    //追加する3つ目のボタンで挿入する内容（HTML）
    _MyDiv03 : function(d, fmt) {//挿入する HTML
      str = '<div class="space2em"></div><br>';
      return str;
    }
  });
  tinymce.PluginManager.add('myButtons', tinymce.plugins.myButtons);//プラグインID,プラグイン関数名
})();

また、以下のようにすると良いとのこと。（但し、この例では事情があり、改行コードを入れています。）

挿入する内容（HTML）に含まれる改行コードを全て \n という文字に変換。
＆nbsp; 等の必要の無い空白も除去。
（ビジュアルエディターでは空の要素は削除される）

ボタンの画像は 20x20px で作成して保存。

この例ではオリジナルテーマのフォルダ内の js というフォルダ（editor_plugin.js があるフォルダ）の中に「images」というフォルダを作成してその中に保存。

以下を functions.php に記述。

class myMceButton {
  function myMceButton() {
    add_action('init', array(&$this, 'addbuttons'));
  }
  function sink_hooks(){
    add_filter('mce_plugins', array(&$this, 'mce_plugins'));
  }
  function addbuttons() {
    //編集権限なければリターン
     if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;
     //ビジュアルエディタの場合のみ追加
     if ( get_user_option('rich_editing') == 'true') {
     add_filter("mce_external_plugins", array(&$this, 'mce_external_plugins'));
     add_filter('mce_buttons', array(&$this, 'mce_buttons'));
     }
  }
  function mce_buttons($buttons) {
     //追加するボタンの名前（separator は区切り）
     array_push($buttons, "separator", "Div_01");
     array_push($buttons, "separator", "Div_02");
     array_push($buttons, "separator", "Div_03");
     return $buttons;
  }
  // TinyMCE プラグインファイルを読み込む: editor_plugin.js
  function mce_external_plugins($plugin_array) {
     //プラグイン関数名＝ファイルの位置「originalTheme」部分を自分のテーマに変更
     $plugin_array['myButtons'] = site_url() .'/wp-content/themes/originalTheme/js/editor_plugin.js';
     return $plugin_array;
  }
}
$mybutton = new myMceButton();
add_action('init',array(&$mybutton, 'myMceButton'));

ボタンで挿入した内容（HTML）のスタイルを設定。

style.css と editor-style.css の両方にスタイルの指定を追加。

style.css と editor-style.css

.clear {
  clear: both;
}

.space1em {
  clear: both;
  height: 1em;
}

.space2em {
  clear: both;
  height: 2em;
}

Web Design Leaves