• Home
  • Movable Type
  • MTAppjQuery
  • Movable Type 7 + MTAppjQuery v2 でカテゴリ編集画面でリッチテキストエディタを利用する

Movable Type 7 + MTAppjQuery v2 でカテゴリ編集画面でリッチテキストエディタを利用する

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

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

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

MTAppjQuery