Manul Tech

WPのビジュアルエディタ(TinyMCE)にオリジナルのボタンが必要になったので調べた。


別にプラグインでもいいと思う

AddQuicktag」とかあるし、別にそれを使うってのもいいと思うんだけど、今回はビジュアルエディタ上にボタンを表示させたかったので自力で。(確かAddQuickTagはHTMLエディタの方じゃないと出てこないよね、確か)

まずはadd_action

「mce_external_plugins」アクションでJSファイルを追加する。ボタンの詳細はこのJS内に書くことになる。それと「mce_buttons」でボタンの表示リストみたいなの(よく分かってない)にボタンを追加しておく。
以下はシンプルな「文字サイズ(大)」と「文字サイズ(小)」を追加する例。

JSでボタンを追加

「mce_external_plugins」アクションで追加したJSにボタンの仕様などを書く。

3行目、「init」のところでボタンを追加したり、ボタンの挙動を設定したりできる。
「editor.addButton」でボタンを追加する。設定できるオプションはhttp://www.tinymce.com/wiki.php/api4%3aclass.tinymce.ui.Buttonに全部書いてある。

今回は15行目で、文字を選択している状態でのみボタンがアクティブになるようにしてみた。
選択している文字列は「editor.selection.getContent()」で取得できる。

こんな感じ。