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

CATEGORY: WordPress

2014年6月13日

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

目次

エディタスタイルシート

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

以下を function.php に記述。

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

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

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

functions.php

  1. function custom_editor_settings( $initArray ){
  2.   $initArray['body_class'] = 'editor-area';
  3.   return $initArray;
  4. }
  5. add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

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

  1. <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

  1. @charset "utf-8";
  2.  
  3. body.mceContentBody {
  4.     font-size: 12px;
  5.     font-family: "メイリオ",Meiryo,Osaka,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  6.   max-width: 600px;
  7. }
  8.  
  9. .editor-area a {
  10.   color: green;
  11.   text-decoration: underline;
  12. }
  13.  
  14. .editor-area p {
  15.   margin: 0 0 1em 0;
  16. }
  17.  
  18. p.wp-caption-text {
  19.   margin: 0;
  20. }
  21.  
  22. .alignleft {
  23.   display: block;
  24.   float: left;
  25.   margin-right: 10px;
  26.   margin-bottom: 1em;
  27. }
  28. .aligncenter {
  29.   display: block;
  30.   margin:0 auto;
  31. }
  32. .alignright {
  33.   display: block;
  34.   float: right;
  35.   margin-left: 10px;
  36.   margin-bottom: 1em;
  37. }
  38.  
  39. .clear {
  40.   clear: both;
  41. }
  42.  
  43. .space1em {
  44.   clear: both;
  45.   height: 1em;
  46. }
  47.  
  48. .space2em {
  49.   clear: both;
  50.   height: 2em;
  51. }

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

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

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

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

functions.php

  1. // ビジュアルエディタにボタンを追加
  2. function add_mce_extrabuttons($buttons){
  3.   array_push($buttons, "backcolor", "hr");
  4.   return $buttons;
  5. }
  6. 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

  1. (function() {
  2.   tinymce.create('tinymce.plugins.myButtons', {//プラグイン関数名
  3.     getInfo : function() {//プラグイン情報
  4.     return {
  5.       longname : 'WDL myButtons',
  6.       author : 'WDL',
  7.       authorurl : 'https://www.webdesignleaves.com',
  8.       infourl : 'https://www.webdesignleaves.com',
  9.       version : "0.1"
  10.       };
  11.     },
  12.     init : function(ed, url) {
  13.       var t = this;
  14.       t.editor = ed;
  15.       //追加する1つ目のボタン
  16.       ed.addCommand('Div_01',//コマンドID
  17.         function() {
  18.         var str = t._MyDiv01();
  19.         ed.execCommand('mceInsertContent', false, str);
  20.       });
  21.       ed.addButton('Div_01', {//ボタンの名前
  22.         title : 'フロートクリア', //tileのテキスト
  23.         cmd : 'Div_01', //コマンドID
  24.         image : url + '/images/mce_btn01.png' //ボタン画像(js/images)
  25.       });
  26.       //追加する2つ目のボタン
  27.       ed.addCommand('Div_02',//コマンドID
  28.         function() {
  29.         var str = t._MyDiv02();
  30.         ed.execCommand('mceInsertContent', false, str);
  31.       });
  32.       ed.addButton('Div_02', {//ボタンの名前
  33.         title : '1行分スペース', //tileのテキスト
  34.         cmd : 'Div_02', //コマンドID
  35.         image : url + '/images/mce_btn02.png' //ボタン画像(js/images)
  36.       });
  37.       //追加する3つ目のボタン
  38.       ed.addCommand('Div_03',//コマンドID
  39.         function() {
  40.         var str = t._MyDiv03();
  41.         ed.execCommand('mceInsertContent', false, str);
  42.       });
  43.       ed.addButton('Div_03', {//ボタンの名前
  44.         title : '2行分スペース', //tileのテキスト
  45.         cmd : 'Div_03', //コマンドID
  46.         image : url + '/images/mce_btn03.png' //ボタン画像(js/images)
  47.       });
  48.     },
  49.     //追加する1つ目のボタンで挿入する内容（HTML）
  50.     _MyDiv01 : function(d, fmt) {//挿入する HTML
  51.       str = '<div class="clear"></div><br>';
  52.       return str;
  53.     },
  54.     //追加する2つ目のボタンで挿入する内容（HTML）
  55.     _MyDiv02 : function(d, fmt) {//挿入する HTML
  56.       str = '<div class="space1em"></div><br>';
  57.       return str;
  58.     },
  59.     //追加する3つ目のボタンで挿入する内容（HTML）
  60.     _MyDiv03 : function(d, fmt) {//挿入する HTML
  61.       str = '<div class="space2em"></div><br>';
  62.       return str;
  63.     }
  64.   });
  65.   tinymce.PluginManager.add('myButtons', tinymce.plugins.myButtons);//プラグインID,プラグイン関数名
  66. })();

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

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

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

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

以下を functions.php に記述。

  1. class myMceButton {
  2.   function myMceButton() {
  3.     add_action('init', array(&$this, 'addbuttons'));
  4.   }
  5.   function sink_hooks(){
  6.     add_filter('mce_plugins', array(&$this, 'mce_plugins'));
  7.   }
  8.   function addbuttons() {
  9.     //編集権限なければリターン
  10.      if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
  11.      return;
  12.      //ビジュアルエディタの場合のみ追加
  13.      if ( get_user_option('rich_editing') == 'true') {
  14.      add_filter("mce_external_plugins", array(&$this, 'mce_external_plugins'));
  15.      add_filter('mce_buttons', array(&$this, 'mce_buttons'));
  16.      }
  17.   }
  18.   function mce_buttons($buttons) {
  19.      //追加するボタンの名前（separator は区切り）
  20.      array_push($buttons, "separator", "Div_01");
  21.      array_push($buttons, "separator", "Div_02");
  22.      array_push($buttons, "separator", "Div_03");
  23.      return $buttons;
  24.   }
  25.   // TinyMCE プラグインファイルを読み込む: editor_plugin.js
  26.   function mce_external_plugins($plugin_array) {
  27.      //プラグイン関数名＝ファイルの位置「originalTheme」部分を自分のテーマに変更
  28.      $plugin_array['myButtons'] = site_url() .'/wp-content/themes/originalTheme/js/editor_plugin.js';
  29.      return $plugin_array;
  30.   }
  31. }
  32. $mybutton = new myMceButton();
  33. add_action('init',array(&$mybutton, 'myMceButton'));

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

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

style.css と editor-style.css

  1. .clear {
  2.   clear: both;
  3. }
  4.  
  5. .space1em {
  6.   clear: both;
  7.   height: 1em;
  8. }
  9.  
  10. .space2em {
  11.   clear: both;
  12.   height: 2em;
  13. }