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

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

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

• 概要欄をリッチテキストにする - The blog of H.Fujimoto

この記事の中でも、

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

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

(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 を変更するとうまくいかなくなります。

以上です。