jquery中的TinyMCE实例可排序

Question

我很难过,很沮丧,所以有时间寻求帮助.做了很多谷歌搜索但尚未找到适合我的解决方案.

我所拥有的是一大堆可以使用Jquery排序的div,一些div包含一个TinyMCE实例.在你尝试移动包含TinyMCE实例的div之前,这一切都很好 - 当你做TinyMCE似乎刷新自己并创建一个新的实例,然后你丢失了数据等等.然后整个页面断开,因为javascript不再工作:).在这段时间里,我在Firebug中获得了javascript构造函数错误等.

我已经决定了最好的方法是当div开始被拖动时从文本区域移除tinymce并且当它被放置在它的新位置时插入tinymce.

我可以删除它,但无法将其添加回来 - 因为我得到更多的构造函数错误.

注意:TinyMCE会自动添加到我正在使用的系统中的所有文本区域,因此尽量避免弄乱TinyMCE.

在下面的代码中,我只是针对特定的textarea id进行测试.

$cols.sortable({
                            cursor: 'move',
                            revert: true,
                            opacity: 0.6,
                            placeholder: 'widgetplaceholder',
                            forcePlaceholderSize: true,
                            connectWith: cols,
                            zIndex:9000,
                            cancel: ".collapsable_box_editpanel_groups, .collapsable_box_content",
                            start: function(e, ui) {
                                     // removes tinymce ok from textarea
                                     tinyMCE.execCommand( 'mceRemoveControl', false, 'textarea1' );

                            },
                            stop: function(e,ui) {
                                    // breaks here - constructor error
                                    tinyMCE.execCommand( 'mceAddControl', true, 'textarea1' );
                                    $(this).sortable( "refresh" );
                            }
                    });

还有其他人有其他解决方案吗？如果您需要更多信息,请让我:)

Answer 1

嘿,如果你的MCE实例中已经有数据,为了避免丢失它,你可以试试这个:

start: function(e, ui){
    $(this).find('.tinyMCE').each(function(){
        tinyMCE.execCommand( 'mceRemoveControl', false, $(this).attr('id') );
    });
},
stop: function(e,ui) {
    $(this).find('.tinyMCE').each(function(){
        tinyMCE.execCommand( 'mceAddControl', true, $(this).attr('id') );
        $(this).sortable("refresh");
    });
}

在我的情况下,我使用.tinyMCE对所有MCE实例进行了分类

Answer 2

适用于TinyMCE的第4版

start: function (e, ui) {
  $(ui.item).find('textarea').each(function () {
     tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
  });
},
stop: function (e, ui) {
  $(ui.item).find('textarea').each(function () {
     tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
  });
}

Answer 3

不，没有其他解决方案。这就是它需要完成的方式。当操作包含tinymce实例的dom元素时，您需要停用它们，并在完成dom操作后使用mceRemoveControl和重新激活它们mceAddControl。