導入
Web開発において、CMSや管理画面でWYSIWYGエディタ（TinyMCEなど）を導入するケースは非常に多いです。しかし、標準機能で提供されるダイアログは、モバイル環境で表示が崩れたり、画面外にはみ出して操作不能になったりすることがあります。この課題を解決するため、外部ライブラリ（Bootstrap等）のモーダル機能をTinyMCEのプラグインとして組み込む手法が非常に有効です。本記事では、実務で役立つ「TinyMCEカスタムプラグイン」の作成方法を解説します。
基礎知識
TinyMCEはプラグインベースで機能拡張が可能です。`tinymce.PluginManager.add` を使用して独自のプラグインを定義することで、エディタのツールバーにボタンを追加したり、独自のコマンドを実行したりできます。重要なのは、エディタのインスタンス（editor）を制御用オブジェクトに保持させることで、プラグイン内からエディタに対してコンテンツの挿入（mceInsertContent）などの操作を行う仕組みです。
実装・解決策
実装の肝は、TinyMCEのポップアップ機能に頼らず、DOMとして配置したBootstrapのモーダルをJavaScriptで制御することです。
1. プラグインの定義（plugin.min.js）を作成し、ボタンクリック時に外部のJavaScriptオブジェクト（myObj）のメソッドを呼び出すようにします。
2. モーダル内の「決定」ボタンに対して、`editor.execCommand` を使ったコンテンツ挿入処理をバインドします。
3. これにより、CSSメディアクエリによる柔軟なレイアウト制御が可能となり、スマホ環境でも快適なUIを提供できます。
サンプルプログラム
以下は、ボタンを押すとモーダルが開き、入力内容をエディタに反映させるための最小構成コードです。
// tinymce/plugins/myplugin/plugin.min.js
tinymce.PluginManager.add(‘myplugin’, function( editor ) {
// コマンドの登録：エディタのボタン押下時に実行される
editor.addCommand(‘MyCommand’, function() {
// グローバルスコープのオブジェクトを呼び出し、エディタインスタンスを渡す
window.myObj.open(editor);
});
// ツールバーボタンの追加
editor.addButton(‘myplugin’, {
text: ‘挿入’,
cmd: ‘MyCommand’
});
});
// HTML側の制御スクリプト
var myObj = {
editor: null,
open: function(ed) {
this.editor = ed; // エディタインスタンスを保持
$(‘#myModal’).modal(‘show’);
},
insert: function() {
// TinyMCEにコンテンツを挿入
myObj.editor.execCommand(‘mceInsertContent’, false, “挿入されたテキスト”);
$(‘#myModal’).modal(‘hide’);
}
};
$(function(){
// 決定ボタンのイベント紐付け
$(‘#mySubmit’).on(‘click’, myObj.insert);
});
応用・注意点
実務で運用する際は、以下の点に注意してください。
1. エディタインスタンスのライフサイクル:
複数のエディタを同一ページに配置する場合、`myObj` で保持するエディタインスタンスが上書きされないよう、クラス化するか、エディタごとのIDで管理するように設計を変更してください。
2. セキュリティ対策:
`mceInsertContent` で挿入する内容は、必ずサニタイズされたもの、あるいは信頼できるソースからのデータのみを対象にしてください。ユーザー入力をそのまま挿入するとXSSのリスクが高まります。
3. スタイル競合の回避:
BootstrapのCSSが管理画面全体のスタイルに影響を与えないよう、モーダル周辺には独自のラッパークラスを適用し、CSSのセレクタを限定的にすることをお勧めします。