• Home
  • MTAppjQuery
  • Movable Type の概要やテキスト(複数行)のカスタムフィールドをリッチテキストにする方法 - ドラッグ&ドロップやアセットの挿入にも対応

Movable Type の概要やテキスト(複数行)のカスタムフィールドをリッチテキストにする方法 - ドラッグ&ドロップやアセットの挿入にも対応

この記事で紹介している「$.MTAppApplyMCE();」は MTAppjQuery v1.8.0 より「$.MTAppApplyTinyMCE();」という名前で本体に取り込みました。

Movable Type の「概要」や「テキスト(複数行)カスタムフィールド」をリッチテキストにする方法を紹介します。

先日書いた「Movable Type の記事投稿画面にドラッグ&ドロップの並び変えに対応したリッチテキストエディタを追加してみる」の内容を少し成長させた感じです。

今回も「MTAppjQuery」がインストールされていることが前提となります。

まずは完成した動画をどうぞ。

user.js

まず、user.js に下記のコードを書きます。
なんとなく、今後 MTAppjQuery 本体に取り入れてもいいかなと思ったので、それっぽい名前にしています。

(function($){
// -------------------------------------------------
//  $.MTAppApplyMCE();
//
//  Description:
//    概要欄やテキスト(複数行)のカスタムフィールドをリッチテキストエディタに変更する
//
//  Usage:
//    $.MTAppApplyMCE(Options);
//
//  Options:
//    target: {Array} リッチテキストエディタに変更するtextareaのidの配列
//    sortable: {Boolean} ドラッグアンドドロップのソートに対応させる場合はtrue
// -------------------------------------------------
$.MTAppApplyMCE = function(options){
    var op = $.extend({}, $.MTAppApplyMCE.defaults, options);
    if (mtappVars.template_filename !== 'edit_entry') return;
    var target = op.target;
    var targetTrim = {};
    var targetMce = {};
    for (var i = 0, l = target.length; i < l; i++) {
        if (target[i].indexOf('customfield_') !== -1) {
            targetTrim[target[i]] = target[i].replace('customfield_', '');
            document.getElementById(target[i]).id = targetTrim[target[i]];
        }
        else {
            targetTrim[target[i]] = target[i];
        }
        targetMce[target[i]] = new MT.EditorManager(targetTrim[target[i]]);
        $('#entry_form').submit(function() {
            targetMce.currentEditor.save();
        });
    }
    if (op.sortable) {
        $('#sortable').sortable({
            start: function(event, ui){
                var id = ui.item[0].id.replace(/-field/,'');
                if ($.inArray(id, target) !== -1) {
                    targetMce[id].currentEditor.save();
                }
            },
            stop: function(event, ui){
                var id = ui.item[0].id.replace(/-field/g,'');
                if ($.inArray(id, target) !== -1) {
                    $('#' + targetTrim[id]).removeAttr('style').next().remove();
                    targetMce[id] = new MT.EditorManager(targetTrim[id]);
                }
            }
        });
    }
};
$.MTAppApplyMCE.defaults = {
    target: [],
    sortable: true
};
// end - $.MTAppApplyMCE()
})(jQuery);

これが textarea をリッチテキストにする $.MTAppApplyMCE() というメソッド本体のコードです。

このコードの最後の })(jQuery); の手前の行に、MTAppApplyMCE を実行する下記のコードを挿入します。

$.MTAppApplyMCE({
    target: ['customfield_cftext', 'customfield_test_text', 'excerpt']
});

この実行コードの target オプションに、リッチテキストにする textarea の id を配列でセットすれば OK です。上記の例でいれば、ベースネームが「cftext」「test_text」という2つの「テキスト(複数行)」タイプのカスタムフィールドと概要欄に適用させています。

なお、ドラッグアンドドロップによる並べ替えを既に無効にしているような場合は、その部分に対応させたコードは実行する必要がないので、そういったときは sortable: false を設定してあげれば OK です。

$.MTAppApplyMCE({
    target: ['customfield_cftext', 'customfield_test_text', 'excerpt'],
    sortable: false
});

以上です。

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

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

Craft CMS

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