wp_editorをJavaScriptで追加する

管理画面でビジュアルエディタ付きのリピートフィールドを作る必要があり、その時に少しハマったのでメモです。

1 wp.editorを使う
2 wp.editorの使い方
3 まとめ

wp.editorを使う

PHPではwp_editor()を使うと簡単にビジュアルエディタを追加できます。しかし、ACFのリピートフィールドのようにJavaScriptでビジュアルエディタを含む要素を追加したい場合は利用することができません。

このあたりはWordPress側でちゃんとフォローされており、wp.editorというメソッドが用意されています。

Javascript Reference/wp.editor « WordPress Codex

基本的な構文は下記になります。

wp.editor.initialize( editorId, configObject );

editorId: ビジュアルエディタにしたいtextareaのID
configObject: TinyMCEの設定など。

wp.editorの使い方

HTLM

HTMLにはビジュアルエディタにしたいtextarea要素が必要です。この要素のIDを後で使います。

<textarea class="wp-editor-area" name="textarea_name" id="textarea_id"></textarea>

ポイントはクラス名で、これにwp-editor-areaを指定しておかないとビジュアルエディタ用のCSSのいくつかが適用できません。ここで少しはまりました。

PHP

ビジュアルエディタ用のスクリプトやスタイルシートの読み込みが必要です。管理画面内で使う場合は次のようになります。

add_action( 'admin_enqueue_scripts', 'load_admin_scripts');

function load_admin_scripts($hook_suffix) {
  if ( 'target_page' === $hook_suffix ) {
    wp_enqueue_editor();
  }
}

全ページにこのスクリプトを読み込むのはオススメではありません。この例では$hook_suffixの値を使って希望するページだけに表示するようにしています。’target_page’を表示したいページの接尾辞にしましょう。

JavaScript

次のように書くことでビジュアルエディタが表示されます。

wp.editor.initialize(
　'textarea_id',
　{
　　　tinymce: { // TinyMCEの設定
　　　wpautop: true, //　<p>や<br>タグの自動付与
　　　plugins : 'charmap colorpicker compat3x directionality fullscreen hr image lists media paste tabfocus textcolor wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview', // TinyMCEのプラグイン      toolbar1: 'bold italic underline strikethrough | bullist numlist | blockquote hr wp_more | alignleft aligncenter alignright | link unlink | fullscreen | wp_adv', // 1行目のツールバーの内容
     toolbar2: 'formatselect alignjustify forecolor | pastetext removeformat charmap | outdent indent | undo redo | wp_help' // 2行目のツールバーの内容
    },
    quicktags: true, // QuickTagを表示
    mediaButtons: true, //「メディアを追加」ボタンの表示
  }
);

configObjectの設定が重要で、ここを正しく設定しないとツールバーが空っぽになってしまいます。TinyMCEに詳しいと設定がすぐわかると思うのですが、私はそうではないのでどう設定するかで悩みました。

上記コードは下記サイトのサンプルコードそのままです。

posts – How to create WP Editor using javascript – WordPress Development Stack Exchange

このconfigObjectの設定だと下図のようなビジュアルエディタが表示されます。