• Home
  • MTAppjQuery
  • Movable Type の記事投稿画面にドラッグ&ドロップの並び変えに対応したリッチテキストエディタを追加してみる

Movable Type の記事投稿画面にドラッグ&ドロップの並び変えに対応したリッチテキストエディタを追加してみる

今回は、Movable Type の概要欄を例に、普通の textarea をリッチテキストエディタに変更し、さらにドラッグアンドドロップによる並び替えをしても入力出来なくならないようにしてみたいと思います。

概要欄をリッチテキストエディタにする方法は藤本さんがブログに書かれています。

この記事の中でも、

概要欄をドラッグアンドドロップで並べ替えると、リッチテキストが入力を受け付けなくなります(ページをリロードすれば入力できるようになります)

と書かれていますが、このドラッグアンドドロップに対応させてみたのが下記のコードです。

(function($){
    var excerpt_mce = new MT.EditorManager('excerpt');
    $('#entry_form').submit(function() {
        excerpt_mce.currentEditor.save();
    });
    $('#sortable').sortable({
        start: function(event, ui){
            excerpt_mce.currentEditor.save();
            $('#excerpt').removeAttr('style').next().remove();
        },
        stop: function(event, ui){
            excerpt_mce = new MT.EditorManager('excerpt');
        }
    });
})(jQuery);

これを MTAppjQuery の user.js に書けば OK です。

やっていることは、最初にリッチエディタにして、ドラッグアンドドロップのソート開始時( start )に一度値を保存(テキストエリアに反映)してからリッチエディタを破棄して、ドロップが終了したところ( stop )でまたリッチエディタにしています。

この start でやっている内容は、ひょっとしたら destroy とかのメソッドがあるような気がしますが、すぐには分からなかったのでとりあえずこれで。

また、もしも MTAppjQuery の MTAppFieldSort での並べ替えを併用する場合は、user.js の先頭で MTAppFieldSort をしてしまってください。リッチエディタにした後に DOM を変更するとうまくいかなくなります。

以上です。

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

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

Craft CMS

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