CKEditor for Movable TypeでMTタグの入力を可能にする(エンティティ化の抑止)

公開

Movable Typeにおいて、CKEditor for Movable Typeを適用したリッチテキストエディタ内にMTタグ(テンプレートタグ)を記述することはできるだけ避けたいことではありますが、ページの構成によってはやむを得ずMTタグを記述しなければならない状況が発生することがあります。

<!-- MTタグの例 -->
<$mt:SetVar name="category" value="中学1年"$>
<$mt:Include module="開設科目リスト"$>

しかし、ソース表示に変更してMTタグを貼り付け、WYSIWYG表示に変更すると、下記のようにMTタグがエンティティ化され、MTタグとして機能しない状態に陥ります。

MTタグがエンティティ化されたソースの例

フォーマットを「なし」にせず、「リッチテキスト」のままでMTタグとして扱う方法はないのでしょうか?

CKEditorのconfig.jsファイルのカスタマイズで解決

この事例も以前紹介した記事「CKEditor for Movable Typeの出力ソースをカスタマイズする方法」と同様に、CKEditorのconfig.jsファイルをカスタマイズすることで解決可能です。

名前空間CKEDITOR.config内にprotectedSourceという設定項目があるので、正規表現を利用してMTタグを表す文字列を記述します。<mt:Entries></mt:Entries><$mt:EntryTitle$>の3タイプの形式(ブロックタグとファンクションタグ)を<[\$\/]?mt[\s\S]*?>という文字列で表現しています。

これにより、下記のようにソース表示で入力したMTタグが正しく保持されるようになります(正確にはWYSIWYGモードでの編集を不可能にしている)。なお、WISYWIG表示ではMTタグは全く表示されないので注意が必要です。
MTタグがそのまま保持されたソースの例

カスタマイズ対象ファイルとコード例は下記の通りです。

カスタマイズ対象ファイル

/(MTインストールディレクトリ)/mt-static/plugins/CKEditor/ckeditor/config.js

  • MTにログインし、システムのプラグイン設定>その他の設定に記述することで同様の編集ができるようですが、案件毎に設定するのは手間なので、ファイルを編集する方法を採用しています。

記述するコード

CKEDITOR.editorConfig = function(config) {
 // MTタグのエンティティ化を抑止
 config.protectedSource.push(/<[\$\/]?mt[\s\S]*?>\n?/g);
};
  • 改行が除去されるのを防止するため、正規表現に改行コードを含めています。

カスタマイズ後のconfig.jsのダウンロード

Gistに格納しましたのでよろしければご利用ください。