MTAppjQueryでテキスト(複数行)のカスタムフィールドにリッチテキストエディタを適用する

More than 5 years have passed since last update.


手順.1


Movable Type に MTAppjQuery プラグインをインストール

https://github.com/tinybeans/mt-plugin-MTAppjQuery


手順.2


テキストエリア用のカスタムフィールドを作成

システムオブジェクト: (ブログ)記事

種類 : テキスト(複数行)

ここでは、(ブログ)記事の編集画面に追加されたテキストエリアを想定。


手順.3


/mt-static/plugins/MTAppjQuery/user-files/user.js を編集

(function($){

// ブログ記事編集画面
if( mtappVars.screen_id == 'edit-entry' ){

// カスタムフィールドで追加したテキストエリアにTinyMCEを適用
var _esm = MT.App.EditorStrategy.Multi;
var _create = _esm.prototype.create;
var _set = _esm.prototype.set;

_esm.prototype.create = function(app, ids, format) {
jQuery('textarea[id^="customfield_"]').each(function(i) {
ids.push(this.id);
});
_create.apply(this, arguments);
};

}
})(jQuery);

任意のテキストエリアのみを対象にする場合は「jQuery('textarea[id^="customfield_"]')」のセレクタ指定部分を調整。

「mtappVars.blog_id」による分岐・・・などは、お好みで。


手順.4


/mt-static/plugins/MTAppjQuery/user-files/user.css に追記

#sortable > .field > .field-content > .mt-editor-manager-wrap { display: block !important; }

デフォルトでは「本文」以外の「.mt-editor-manager-wrap」にインラインスタイルで「display:none;」が指定されているため。


手順.5


ブログ > 設定 > 投稿 の「テキストフォーマット」を「リッチテキスト」または「改行を変換」で指定