コンテンツ編集以外でもビジュアルエディタを使用する方法
今回のプラグインのアップデートで追加した「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登録されているエディタを削除してしまいます。一度浸かったエディタを同じページ上で使用しないのであれば、この部分は不要ですが、条件付きでも書いておいた方が便利だと思います。
3つ目の設定ですが、これは「tinyMCEPreInit.mceInit.content」にワードプレスが設定したエディタの設定が用意されていますので、これをそのまま一旦取得して部分的に編集して利用します。上のコードではエディタを適用するテキストエリアの「ID」とエディタの高さを設定し直しています。他の設定項目もありますので、一旦「tinyMCEGlobalSettings」を「console.log()」で見てみると、細かい設定がしやすい筈です。
最後の2行は初期化と登録作業です。これはコピペでも問題ないんじゃないかと。
注意点
上で紹介したコードは一応編集ページで使用したものですので、JavaScriptコードを「wp_enqueue_script()」で出力する際、一応依存するJavaScriptのハンドル「tiny_mce」の記述も忘れないようにしておきましょう。また、textareaタグが先に出力されている必要があると思いますので、それを条件にフックされるようにコーディングする必要もあります。
例えば、TinyMCEのウィンドウマネジャーでポップアップさせる場合だと、ポップアップアクションの後に上のコードを読ませる必要があるでしょうし、AJAXによって追記されたtextareaならAJAXコールのsuccessの後に読ませる必要があるんじゃないでしょうか。
と言った感じで、ビジュアルエディタを使いたい環境にもよると思います。
JavaScriptのグローバル変数に「tinymce」やその設定が定義されていることなど、環境を確認することから始めてみましょう。
テーマ「ShapeShifter」での使い方
厳密に言えば、専用の無料プラグイン「WP Theme ShapeShifter Extensions」に書かれていることの話になるのですが、ビジュアルエディタの使用例を紹介していきます。
まぁ実際「ウィジェット」の設定項目や「メタボックス内」など、まだ手のついていない箇所もあるんですが、実際に紹介したコードが使用されている箇所も記しておきます。
主にコンテンツ編集のTinyMCEに登録している「SS」ボタンによって、ポップアップさせて設定するアイテムのエディタとして使っています。
カラム毎のコンテンツ編集

一応こんな感じでカラムを追加できるんですが、このカラムをクリックしてポップアップ上でエディタを使用できるようにしています。
まぁどんな感じで使用するかですが、各カラムをクリックします。
左側のカラムに書いています。
右側のカラムに書いています。

スクリーンショットはカラムをクリックするとポップアップするエディタです。
右側の設定項目はエディタとは関係ありませんので特に気にしないと思います。
「SS」ボタンによってカラムを追加した後、各カラムをクリックするとエディタがポップアップするようになっていますが、このポップアップはTinyMCEのウィンドウマネジャーで生成されています。
ですので、ポップアップ後に初期化するようにコードが書かれています。
吹き出し
次は吹き出し挿入の機能です。

吹き出しはこんな感じです。

編集用のポップアップはこんな感じです。
まぁ本当はこの上にイメージセット用のボタンと画像の位置を設定するラジオボタンが付いているんですけど、まぁ今はエディタの話ですので、スクリーンショットはこの部分だけです。
ポップアップの横幅がちょっと狭めなのでボタンが1行に入りきっていませんが、まぁ同じようにビジュアルエディタとして機能します。
その他の場所では
まだ実装できていませんが、今後の更新でエディタをビジュアルエディタに変更していけたらと考えています。
ただ、エディタスタイルがコンテンツ用のものですので、これを取っ払って他のものを使うか、HTMLエディタの方を使うようにするか悩んでいるところです。
まぁこのサイトによるダンロードコンテンツに関しては、更新情報で報告していくつもりです。