MTAppjQuery で Movable Type のカテゴリ編集画面でもリッチエディタを使えるようにする

MTAppjQuery で Movable Type のカテゴリ編集画面でもリッチエディタ(TinyMCE)を使えるようにする方法をご紹介します。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

MTAppjQuery を使って、Movable Type のカテゴリ編集画面でも TinyMCE(リッチテキストエディタ)を使えるようにする方法をご紹介します。

Movable Type のカテゴリ編集画面で TinyMCE を使った例

MTAppjQuery プラグインの設定にて

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 で実行

あとは、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名');

という書式になります。「変数名」で指定した変数は、もしこの他にリッチテキストエディタをカスタマイズしたいというときに利用します。

なお、ファイルのアップロードには対応していませんのでご注意ください。

以上です。

Published 2016-11-21
Updated 2019-06-25

「MTAppjQuery」カテゴリの記事一覧