trumbowygでsciprtタグを入れる方法

先日、梅子CMSで本文中にscriptタグがある記事を再編集するときに表示が崩れる問題を修正しました。

梅子CMSはtrumbowygを使用しています。

問題はscriptタグを含む本文情報をデータベースに保存して再度編集するときに発生していました。

本来、不特定多数が入力するフォームではscriptタグを利用できないように制限することが一般的です。
しかし、梅子はCMSでアフィリエイトを使用する場合もあることを想定しています。
アフィリエイトタグ自体がscriptタグを使用しているものが多くあるため、この問題を見過ごすことはできませんでした。

問題

scriptタグを含んだ状態でviewモード（リッチエディタ状態）になると、scriptタグを実行した状態のものが表示されます。

この状態でHTMLソースの切替を行ったり、付近の修正を行うとソースの崩れが発生します。

原因

scriptタグの実行した状態の物をHTMLソースモードに変換するためです。scriptタグ実行前は存在しなかったタグを含めて変換してしまうため、おかしなことになってしまいます。

対応方法

本文中にscriptタグを含む場合、デフォルトでHTMLソースモードになるようにします。

手順は以下の通りです。

データベースから読み込まれたHTMLソース情報を取得
取得したHTMLソースの中にscriptタグが含まれるとき、「view-HTML」のボタンを押下させる
エディタ内を空にする
取得していたHTMLソース情報をエディタに貼り付ける

var contents = $('#trumbowyg-editor').trumbowyg('html')
// scriptタグが含まれるとき、デフォルトでソースモードにする
if(contents.match(/<script/)) {
  $('.trumbowyg-viewHTML-button').trigger('mousedown');
  $('#trumbowyg-editor').trumbowyg('empty');
  $('#trumbowyg-editor').trumbowyg('html', contents);
}

※GitHubでも公開しています

「ソースモード状態にして、HTMLソース情報を貼り付ける」のがポイントです。ソースモードであれば表示と同時にscriptタグが実行されることはありません。

ただソースモードにするだけではなく、「ソースモードにするべくボタンを押した状態」にすることも大事です。「$('.trumbowyg-viewHTML-button').trigger('mousedown');」です。
これを怠ると「ボタンは押されていないのにソースモードになっている」状態になってしまい、挙動の整合性が取れなくなります。