• Home
  • MTAppjQuery
  • Movable Type の記事編集画面の本文と続きを分離する(リッチエディタ対応版)

Movable Type の記事編集画面の本文と続きを分離する(リッチエディタ対応版)

昨日、「Movable Type の記事編集画面の本文と続きを分離する」という記事を書きましたが、今日はその分離した本文・続き欄をリッチエディタにしてみます。

事前に MTAppjQuery がインストールされているのは約束事ということで。

出来上がりは下図のような感じになります。

本文欄と概要欄を分離してリッチテキストエディタにしたイメージ図

さて、これを実現するには下記のコードを user.js に書けば OK です。昨日のコードに $.MTAppApplyMCE 以降を追記した形になります。

(function($){
/* ==================================================
    本文と追記を分離
================================================== */
var body = $.MTAppMakeField({
    id: 'split-content-body',
    label: '本文',
    content: ''
});
var more = $.MTAppMakeField({
    id: 'split-content-more',
    label: '追記',
    content: ''
});
var $textField = $('#text-field').before(body + more);
$('#split-content-body-field .field-content').append($('#editor-input-content').clone().removeAttr('style').attr('id', 'split-content-body').addClass('high').get(0).outerHTML);
$('#split-content-more-field .field-content').append($('#editor-input-extended').clone().removeAttr('style').attr('id', 'split-content-more').addClass('high').get(0).outerHTML);
$('#editor-input-content').removeAttr('name').removeAttr('id');
$('#editor-input-extended').removeAttr('name').removeAttr('id');
$textField.hide();
/*  本文と追記を分離  */
// -------------------------------------------------
//  $.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() {
        for (var i = 0, l = target.length; i < l; i++) {
            targetMce[target[i]].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()
$.MTAppApplyMCE({
    target: ['split-content-body', 'split-content-more'],
    sortable: false
});
})(jQuery);

これで本文欄と続き欄を分離して、別々のリッチテキストフィールドのようになります。

もし、続き欄はリッチテキストにしないといったような場合は、最後の方の target オプションを下記のようにすれば OK です。

    target: ['split-content-body'],

以上です。

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

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

Craft CMS

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