昨日、「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'],

以上です。