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'],

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...