Movable Type の概要やテキスト（複数行）のカスタムフィールドをリッチテキストにする方法 - ドラッグ＆ドロップやアセットの挿入にも対応

Movable Type の「概要」や「テキスト（複数行）カスタムフィールド」をリッチテキストにする方法を紹介します。

先日書いた「Movable Type の記事投稿画面にドラッグ＆ドロップの並び変えに対応したリッチテキストエディタを追加してみる」の内容を少し成長させた感じです。

今回も「MTAppjQuery」がインストールされていることが前提となります。

まずは完成した動画をどうぞ。

user.js

まず、user.js に下記のコードを書きます。
なんとなく、今後 MTAppjQuery 本体に取り入れてもいいかなと思ったので、それっぽい名前にしています。

(function($){

// -------------------------------------------------
// $.MTAppApplyMCE();
//
// Description:
// 概要欄やテキスト（複数行）のカスタムフィールドをリッチテキストエディタに変更する
//
// Usage:
// $.MTAppApplyMCE(Options);
//
// Options:
// target: {Array} リッチテキストエディタに変更するtextareaのidの配列
// sortable: {Boolean} ドラッグアンドドロップのソートに対応させる場合はtrue
// -------------------------------------------------
$.MTAppApplyMCE = function(options){
 var op = $.extend({}, $.MTAppApplyMCE.defaults, options);

 if (mtappVars.template_filename !== 'edit_entry') return;

 var target = op.target;
 var targetTrim = {};
 var targetMce = {};

 for (var i = 0, l = target.length; i < l; i++) {
 if (target[i].indexOf('customfield_') !== -1) {
 targetTrim[target[i]] = target[i].replace('customfield_', '');
 document.getElementById(target[i]).id = targetTrim[target[i]];
 }
 else {
 targetTrim[target[i]] = target[i];
 }
 targetMce[target[i]] = new MT.EditorManager(targetTrim[target[i]]);
 $('#entry_form').submit(function() {
 targetMce.currentEditor.save();
 });

 }

 if (op.sortable) {
 $('#sortable').sortable({
 start: function(event, ui){
 var id = ui.item[0].id.replace(/-field/,'');
 if ($.inArray(id, target) !== -1) {
 targetMce[id].currentEditor.save();
 }
 },
 stop: function(event, ui){
 var id = ui.item[0].id.replace(/-field/g,'');
 if ($.inArray(id, target) !== -1) {
 $('#' + targetTrim[id]).removeAttr('style').next().remove();
 targetMce[id] = new MT.EditorManager(targetTrim[id]);
 }
 }
 });
 }
};
$.MTAppApplyMCE.defaults = {
 target: [],
 sortable: true
};
// end - $.MTAppApplyMCE()

})(jQuery);

これが textarea をリッチテキストにする $.MTAppApplyMCE() というメソッド本体のコードです。

このコードの最後の })(jQuery); の手前の行に、MTAppApplyMCE を実行する下記のコードを挿入します。

$.MTAppApplyMCE({
 target: ['customfield_cftext', 'customfield_test_text', 'excerpt']
});

この実行コードの target オプションに、リッチテキストにする textarea の id を配列でセットすれば OK です。上記の例でいれば、ベースネームが「cftext」「test_text」という２つの「テキスト（複数行）」タイプのカスタムフィールドと概要欄に適用させています。

なお、ドラッグアンドドロップによる並べ替えを既に無効にしているような場合は、その部分に対応させたコードは実行する必要がないので、そういったときは sortable: false を設定してあげれば OK です。

$.MTAppApplyMCE({
 target: ['customfield_cftext', 'customfield_test_text', 'excerpt'],
 sortable: false
});

以上です。