1. 導入
Web開発において、CMSや管理画面でWYSIWYGエディタ「TinyMCE」を導入することは一般的です。しかし、TinyMCE標準のダイアログは古い設計が多く、レスポンシブ対応が不十分なため、スマートフォンなどの狭い画面ではUIが崩れてしまうという課題があります。本記事では、Bootstrapのモーダルを活用し、レスポンシブ対応の独自ダイアログをTinyMCEに組み込む方法を解説します。
2. 基礎知識
TinyMCEは、プラグイン（Plugin）という仕組みで機能を拡張できます。独自のボタンをツールバーに追加し、それをクリックした際に外部のUI（今回はBootstrapのモーダル）を呼び出すことで、柔軟なカスタマイズが可能です。
重要なのは、TinyMCEのeditorインスタンスを適切に管理することです。このインスタンスを介して、モーダル上の操作結果（テキスト挿入など）をエディタ本体に反映させます。
3. 実装/解決策
実装は大きく分けて「プラグインJSの作成」と「HTML側でのモーダル定義」の2ステップです。
プラグインJS内では、tinymce.PluginManagerを使用してボタンを登録します。ボタンが押された際に、グローバルスコープ（または適切なスコープ）で定義したJSオブジェクトを呼び出し、Bootstrapのモーダルを表示させます。モーダル側での操作完了後、TinyMCEのexecCommandメソッドを実行してエディタにコンテンツを挿入します。
4. サンプルプログラム
以下は、プラグインとして動作する最小構成です。
// tinymce/plugins/myplugin/plugin.min.js
tinymce.PluginManager.add(‘myplugin’, function(editor) {
// ボタンの登録
editor.addButton(‘myplugin’, {
text: ‘独自ダイアログ’,
icon: false,
onclick: function() {
// グローバルに定義したモーダル操作用オブジェクトを呼び出す
window.myObj.open(editor);
}
});
});
// HTML側の実装例
5. 応用・注意点
現場で活用する際の注意点として、以下の2点に留意してください。
1. スコープの管理
TinyMCEのインスタンスが複数ある場合、どのエディタに対して操作を行うべきか明確にする必要があります。上記のサンプルではグローバル変数を使用していますが、大規模な実装では名前空間を分けたり、プラグインのデータ属性として保持する設計をおすすめします。
2. execCommandの活用
今回の例では「mceInsertContent」を使用しましたが、他にも「mceLink」や「mceImage」など、多様なコマンドが用意されています。用途に合わせて公式ドキュメントを参照し、最適なコマンドを選択してください。
また、Bootstrapのバージョンが上がるとモーダルのDOM構造が変わる場合があります。利用している環境のバージョンに合わせ、適切にセレクタを調整してください。