Sortable + TinyMCE

困ったこと

TinyMCE が含まれる要素を並び替えした場合に、TinyMCE の iframe の中が空になってしまう。

使用したライブラリ

• DOM 操作には Umbrella JS を使用
• 要素の並び替えには Sortable を使用

Sortable のベーシックな記述方法

並び替え要素に TinyMCE が含まれていなければ問題ない。

var options = {
    handle: '.js-cursor-move',
};
u('.js-sortable').each(function(elem){
    Sortable.create(elem, options);
});

並び替え要素に TinyMCE が含まれている場合の書き方

並び替え開始時に TinyMCE を解除して、並び替え完了時に TinyMCE を再設定する。

var options = {
    handle: '.js-cursor-move',
    onStart: function(evt) {
        u(evt.item).find('.js-wysiwyg-editor').each(function(elem){
            tinyMCE.execCommand('mceRemoveEditor', false, u(elem).attr('id'));
        });
    },
    onEnd: function(evt) {
        u(evt.item).find('.js-wysiwyg-editor').each(function(elem){
            tinyMCE.execCommand('mceAddEditor', true, u(elem).attr('id'));
        });
    },
};
u('.js-sortable').each(function(elem){
    Sortable.create(elem, options);
});