PowerCMSでMTAppFieldSort

PowerCMSでMTAppJqueryのMTAppFieldSortを使う方法です。

MTAppFieldSortはMovableTypeの編集画面にあるフィールドをソートできるので便利ですよね。

しかし、PowerCMSでは一部のケースで期待通り動かない。。。

PowrCMSにはカスタムフィールドとしてエディタ付きテキスト(WYSIWYG)がありますが、MTAppFieldSortでこのフィールドをソートするとWYSIWYGが壊れてしまいます。

ドラッグアンドドロップした時は正常に並び替えできるのに、 MTAppFieldSortで並び替えるとなぜ壊れてしまうのでしょうか。

調べてみるとどうやら、

フィールド並び替えのためにDOMの入れ替えを行うとWYSIWYGが機能しなくなるので、 PowerCMSに付属しているJavascriptがソート発生のイベントをトリガーとして、エディタ付きテキストが壊れないよう工夫しているようです。

そこで、MTAppFieldSortにその処理を組み込んだメソッドを作りました。

/* MTAppFieldSortのPowerCMS対応版を追加 */
$.MTAppFieldSort4PCMS = function(options){
    var op = $.extend({}, $.MTAppFieldSort4PCMS.defaults, options);

    var field = op.sort.split(',').reverse();
    var l = field.length;
    if (l == 0) return;
    var containerId = 'sortable';
    if (op.insertID !== 'sortable') {
        containerId = op.insertID;
    } else if (op.insert_id !== 'sortable') {
        containerId = op.insert_id;
    }
    var container = document.getElementById(containerId);
    if (!container) return;
    if (op.otherFieldHide) {
        $(container).find('div.field').addClass('hidden');
        $('#quickpost').addClass('hidden');
    }
    for (var i = 0; i < l; i++) {
        var id = $.trim(field[i]).replace(/^c:/,'customfield_') + '-field';
        if (document.getElementById(id)) {
            var elm = document.getElementById(id);

            // 追加 エディタ情報を一時退避
            try {
              $("#" + id).find(':input').each(function() {
                var manager = $(this).data('mt-editor');
                if (manager) {
                  manager.currentEditor.powercmsStash();
                }
              });
            } catch (e) {
            }
            // 追加おわり

            container.insertBefore(elm, container.firstChild);

            // 追加 エディタ情報を復帰
            try {
              $("#" + id).find(':input').each(function() {
                var manager = $(this).data('mt-editor');
                if (manager) {
                  manager.currentEditor.powercmsRestore();
                }
              });
            } catch (e) {
            }
            // 追加おわり
            
            $(elm).removeClass('hidden').show();
        } else if (op.debug && window.console) {
            console.log('#' + id + ' が見つかりません');
        }
    }
};
$.MTAppFieldSort4PCMS.defaults = {
    sort: 'title,text,tags,excerpt,keywords',
    insertID: 'sortable',
    insert_id: 'sortable',// Deprecated
    otherFieldHide: true,
    debug: false
};

こんな感じで使えます。使い方はMTAppFieldSortと同じです。

  if($('body#edit-entry').length){
    /* ソート情報は、カンマ区切り、カスタムフィールドは先頭にc:をつける */ 
    $.MTAppFieldSort4PCMS({
          sort: "title,permalink,c:customfieldA,c:customfieldB"
    });
  }

以上です。参考なれば幸いです。

著者:y.t