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'],
以上です。