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

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 を使うと良いと思います。

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

以上です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。