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

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名');

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

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

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...