コンテンツ編集以外でもビジュアルエディタを使用する方法

日付 2017年2月16日

カテゴリーカスタマイズ

タグ TinyMCE,ビジュアルエディタ

今回のプラグインのアップデートで追加した「SS」ボタンの吹き出し挿入でもそうなんですが、ビジュアルエディタのボタンなどによってポップアップしたウィンドウ上で、ビジュアルエディタを使用する方法を紹介してみようと思いました。

そもそも編集ページにビジュアルエディタを使用していながら、更にポップアップしたビジュアルエディタを使用する機会があるのか疑問に思うかもしれませんが、TinyMCEをカスタマイズしていくと、意外と方法を知っておくと便利だと感じることが多いんです。

まぁHTMLエディタの方がクラスやら属性も細かく設定できると思いますので、普段の編集からそちらで慣れている方は不要かもしれませんが、エディタスタイルでプレビューしながら編集できるビジュアルエディタを普段から利用されている方にとっては、結構役に立つ話かもしれません。

ただ、ワードプレス関数「wp_editor()」があれば満足って方にとっては不要な話だと思いますのでスルーしてください。

ワードプレス関数「wp_editor()」を使わない理由と設置方法

一番簡単な方法としては、冒頭にも書いた通りワードプレス関数「wp_editor()」をコールすることでエディターを出力できるんですが、この方法では通常のページロードの際はページのフックによってJavaScriptが読まれますので問題ありません。

ただ、JavaScriptで生成されるHTML上で利用したい場合、「wp_editor()」をコールするとそれらしいテキストエディタが現れますが、ボタンも何も使えないので殆どビジュアルエディタとして機能しません。まぁJavaScriptコードが読まれるフックが既に読まれた後だから仕方ありません。

ええ、ですので、「wp_editor()」を使わない理由とありますが、実際には使えない環境もあるんですよ。

そこでどこでも使えるようにしてしまおうというのが今回の話です。ここでは編集ページのポップアップ上で使用する例を挙げて書いていこうと思います。

恐らくビジュアルエディタを使用する上で気になっている方もいるかと思いますが、編集ページのコンテンツ用のエディタの設定をそのまま使用できる方法ですのでエディタスタイルの適用も可能ですよ～。

まずはid属性付きのtextareaタグを用意

JavaScriptでビジュアルエディタを初期化するんですが、ビジュアルエディタに入力したテキストなどは、テキストエリアの値のHTMLとして保存されます。

これは編集ページでも同じことなんですが、ビジュアルエディタを出力したい位置にtextareaタグを出力するようにします。この時id属性を与える必要があるのですが、このid属性は念のため、ハイフンを使用しない「半角英字の小文字のみ」の文字列を使うようにしておきましょう。ワードプレス関数「wp_editor()」の使い方の注意書きにある事項ですので、ここでも一応書いておきました。

参照：wp_editor() | Function | WordPress Developer Resources

日本語の参照ページで見ると、アンダーバーも有りのように書いていたんですが、英語の参照ページには正規表現で使用可能な文字列が「/[a-z]+/」と表記されていましたので、一応そういう風にしておきましょう。

<textarea id="yourvisualeditor" name="yourvisualeditor"></textarea>

他のIDとダブらないように付けようとすると、ハイフンを付けることができないため、ちょっとIDが読みにくいんですが、そこは諦めてください。

JavaScriptで設定を取得

手順としては、

エディタの削除
グローバル設定の取得
設定の編集
エディタの初期化

と言った感じですが、特別面倒なコードはありません。

まずはざっくりとコードを見てみます。随分前に書いてからちゃんと見直していないので、細かい所をあまり見ていないのですが、とりあえずこれを使ってみます。

// Editor ID
    var editorId = 'yourvisualeditor';

// Remove
    tinymce.execCommand( 'mceRemoveEditor', true, editorId );

// tinyMCE Settings
    tinyMCEGlobalSettings = tinyMCEPreInit.mceInit.content;
    tinyMCEGlobalSettings.selector = "#" + editorId;
    tinyMCEGlobalSettings.height = "200px";

// tinyMCE Initialize
    tinymce.init( tinyMCEGlobalSettings ); 
    tinyMCE.execCommand( 'mceAddEditor', false, editorId );

IDは先程書いてみたtextareaタグのものです。

次にエディタを削除しているのですが、これはグローバルに一度ID登録されている場合を想定しています。例えば、一度既に生成したHTML上でエディタを初期化している場合、既にIDが登録されてしまっているために、初期化処理が上手くいかないんです。ですので、一度tinymceにID登録されているエディタを削除してしまいます。一度浸かったエディタを同じページ上で使用しないのであれば、この部分は不要ですが、条件付きでも書いておいた方が便利だと思います。

３つ目の設定ですが、これは「tinyMCEPreInit.mceInit.content」にワードプレスが設定したエディタの設定が用意されていますので、これをそのまま一旦取得して部分的に編集して利用します。上のコードではエディタを適用するテキストエリアの「ID」とエディタの高さを設定し直しています。他の設定項目もありますので、一旦「tinyMCEGlobalSettings」を「console.log()」で見てみると、細かい設定がしやすい筈です。

最後の２行は初期化と登録作業です。これはコピペでも問題ないんじゃないかと。

注意点

上で紹介したコードは一応編集ページで使用したものですので、JavaScriptコードを「wp_enqueue_script()」で出力する際、一応依存するJavaScriptのハンドル「tiny_mce」の記述も忘れないようにしておきましょう。また、textareaタグが先に出力されている必要があると思いますので、それを条件にフックされるようにコーディングする必要もあります。

例えば、TinyMCEのウィンドウマネジャーでポップアップさせる場合だと、ポップアップアクションの後に上のコードを読ませる必要があるでしょうし、AJAXによって追記されたtextareaならAJAXコールのsuccessの後に読ませる必要があるんじゃないでしょうか。

と言った感じで、ビジュアルエディタを使いたい環境にもよると思います。

JavaScriptのグローバル変数に「tinymce」やその設定が定義されていることなど、環境を確認することから始めてみましょう。