LoginSignup
17

More than 5 years have passed since last update.

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

Posted at

手順.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


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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17