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

Movable Type の記事編集画面の本文欄と続き欄を分離する方法を紹介します。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

タイトルそのままですが、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 を使うと良いと思います。

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

以上です。

Published 2015-02-10
Updated 2019-06-25

「MTAppjQuery」カテゴリの記事一覧