Bootstrap + Modal & Tinymce4

viva

Bootstrapのモーダルをオプションのremoteで使いまわすと、内容がキャッシュのように残ってしまうので以下のサイトを参考に１つ目の問題を解決

参考：[Bootstrap]modalで内容をキャッシュさせない

$('#tb_modal').on('hide.bs.modal', function (e) {
	$(this).removeData();
});

実行時のソースを見ていると下記コードの方が綺麗ですが、どっちでもOKです。

 $(document).on("hidden.bs.modal", function (e) {
	$(e.target).removeData("bs.modal").find(".modal-content").empty();
});

次の問題はモーダルにテキストエリアを設置し、Tinymceなどを使用した場合に発生します。
モーダルを閉じて再度モーダルを開くとTinymceが適用されません。

凄く簡単な方法がありそうですが、JSの苦手な僕は以下の方法で対応しました。

$('#tb_modal').on('hide.bs.modal', function (e) {
	$(this).removeData();
	tinymce.remove();
});

１番目のコードにハイライト行（3行目）を加えます。
※モーダルを閉じる際にTINYMCEを破棄

逆に、モーダル読み込み完了後にinitします。

$('#tb_modal').on('loaded.bs.modal', function (e) {
	tinymce.init({
/* ---  略 --- */
	});
});

要するに、動的に追加された要素に対してTINYMCEが反応しないので、いったん破棄してやり直せ！って言うやり方です。

きっと他にもっと良い方法があると思いますが、いろいろ試してダメだったので･･･
「こうすれば良いんだよ！」という情報をお願いします･･･。
基礎から勉強しないとなぁ～

viva

More Posts