Movable Type の記事編集画面の本文と続きを分離する

タイトルそのままですが、MTAppjQuery を利用して Movable Type の記事編集画面の本文欄と続き欄を分離するカスタマイズを紹介します。

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

本文欄と概要欄を分離したイメージ図

さて、これを実現するには下記のコードを user.js に書けば OK です。

2015/02/15 追記 : コードを一部修正しました( .attr('id', 'foo') の部分)。

(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();
/*  本文と追記を分離  */
})(jQuery);

ポイントは、元の textareaclone() して .get(0).outerHTML で HTML を取得するところでしょうか。

clone() したまま append() したり、元の要素をそのまま appendTo() するとリッチテキスト関連の情報も一緒に付いてきてしまうので上手く動作しなくなってしまいます。

あと、これだと記事のドラッグアンドドロップでのソートには対応しないので、挿入箇所を調整するか、MTAppjQuery の MTAppFieldSort を使うと良いと思います。

明日は、この分離した本文欄と追記欄をリッチテキストエディタにする方法を紹介します。

以上です。

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