MTAppjQuery で Movable Type のカテゴリ編集画面でもリッチエディタ(TinyMCE)を使えるようにする方法をご紹介します。
MTAppjQuery を使って、Movable Type のカテゴリ編集画面でも TinyMCE(リッチテキストエディタ)を使えるようにする方法をご紹介します。
Movable Type のカテゴリ編集画面では、TinyMCE のライブラリなど、リッチテキストエディタに必要な JavaScript ファイルが読み込まれていません。これらを読み込ませるために、ウェブサイト・ブログスコープの MTAppjQuery プラグインの設定の「 変数 mtapp_html_foot に追加(MTAppjQueryのuser.jsの直前)
」という欄に下記のコードを入力して保存します。
<mt:If name="mtappVars" key="screen_id" eq="edit-category">
<script type="text/javascript" src="<mt:StaticWebPath />js/editor/editor_manager.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />js/editor/editor_command.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />js/editor/editor_command/wysiwyg.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />js/editor/editor_command/source.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />js/editor/app.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />js/editor/editor.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />js/editor/app/editor_strategy.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />js/editor/app/editor_strategy/single.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />js/editor/app/editor_strategy/multi.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />js/editor/app/editor_strategy/separator.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />js/editor/editor/source.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />plugins/TinyMCE/tiny_mce/tiny_mce_src.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />plugins/TinyMCE/lib/js/adapter.js"></script>
<script type="text/javascript">
jQuery.extend(MT.Editor.TinyMCE.config, {
plugin_mt_wysiwyg_buttons1: MT.Editor.TinyMCE.config.plugin_mt_wysiwyg_buttons1.replace(',mt_insert_file,mt_insert_image', '')
});
</script>
</mt:If>
これでカテゴリ編集画面でも TinyMCE が使えるようになりました。
あとは、user.js で下記のように TinyMCE を適用します。下記のコードは、カテゴリの「説明」欄とカスタムフィールドの「テキスト(複数行)」に適用した例です。
(function($){
if (mtappVars.screen_id === 'edit-category') {
var categoryDescription = new MT.EditorManager('description');
var categoryCustomfield = new MT.EditorManager('customfield_categorytextarea01');
}
})(jQuery);
このように、
var 変数名 = new MT.EditorManager('テキストエリアのid名');
という書式になります。「変数名」で指定した変数は、もしこの他にリッチテキストエディタをカスタマイズしたいというときに利用します。
なお、ファイルのアップロードには対応していませんのでご注意ください。
以上です。