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

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

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

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

以上です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。