MTAppjQuery v2 を利用して Movable Type 7 のでカテゴリ編集画面でリッチテキストエディタを利用する方法をご紹介します。

Movable Type 本体の管理画面に依存する部分が大きいので「動作保証」とまでは言えませんが、v.2.3.2 あたりから、カテゴリ編集画面でも使えるように意識してはいます。

MTAppjQuery プラグインの設定

システムスコープの MTAppjQuery プラグインの設定の「システム全体に適用する設定」ブロックの中の「user.css の読み込み直前」に下記のコードを入れて保存します。

<mt:If name="mtappVars" key="screen_id" eq="edit-category">
<style>
.mtapp-overlay-editor img {
 max-width: 100%;
 height: auto;
}
div.mce-notification-error {
 display: none;
}
.mce-ico.mce-i-bold {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_bold.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-italic {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_italic.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-underline {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_underline.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-strikethrough {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_crossoff.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-blockquote {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_quotation.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-bullist {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_list.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-numlist {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_ol.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-hr {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_hr.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-link {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_link.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-unlink {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_unlink.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-unlink {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_unlink.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-addhtml {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_addhtml.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-newdocument {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_asset.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-image {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_image.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-undo {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_undo.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-redo {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_redo.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-forecolor {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_textcolor.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-backcolor {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_backgroundcolor.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-removeformat {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_eraser.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-indent {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_indent.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-outdent {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_unindent.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-code {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_code.svg') no-repeat center/16px;
 text-indent: -9999px;
}
.mce-ico.mce-i-fullscreen {
 background: transparent url('<mt:Var name="static_uri">images/icons/ic_fullscreen.svg') no-repeat center/16px;
 text-indent: -9999px;
}
</style>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor/editor_manager.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor/editor_command.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor/editor_command/wysiwyg.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor/editor_command/source.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor/app.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor/editor.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor/app/editor_strategy.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor/app/editor_strategy/single.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor/app/editor_strategy/multi.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor/app/editor_strategy/separator.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor/editor/source.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">js/editor.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">plugins/TinyMCE/tiny_mce/tinymce.min.js"></script>
<script type="text/javascript" src="<mt:Var name="static_uri">plugins/TinyMCE/lib/js/adapter.js"></script>
<script type="text/javascript">
MT.EditorManager.updateMap({
 wysiwyg: 'tinymce',
 source: 'tinymce'
});
MT.App.setDefaultEditorStrategy('multi');
MT.Editor.updateDefaultCommonOptions({
 body_class_list: ['wysiwyg', 'entry'],
 tainted_input: false
});
jQuery.extend(MT.Editor.TinyMCE.config, {});
</script>
</mt:If>

カテゴリ編集画面では、リッチテキストエディタを動かすためのライブラリや CSS が読み込まれていませんので、ここでそれらを読み込ませるようにします。

user.js

あとは、通常通り user.js でテキストエリアのフィールドに mtapp('overlayEditor') を適用します。下記の例ではカテゴリの説明欄に適用させていますが、カスタムフィールドでも同様です。

(function($){
 
 if (mtappVars.screen_id === 'edit-category') {
 $('#description').mtapp('overlayEditor');
 }

})(jQuery);

以上です。お試しください。