jQuery中的TinyMCE实例可排序 [英] TinyMCE instances in jquery sortable

问题描述

我很沮丧和沮丧，所以有时间寻求帮助.做了大量的谷歌搜索，但仍未找到适合我的解决方案.

I'm stumped and frustrated so time to ask for help. Done a lot of googling but yet to find a solution that works for me.

我有一大堆可以使用Jquery sortable进行排序的div，有些div包含TinyMCE实例.在您尝试移动包含TinyMCE实例的div之前，一切都很好-当您这样做时，TinyMCE似乎会刷新自身并创建一个新实例，然后您将因此丢失数据等.然后整个页面由于javascript不再显示而中断作品:).在这段时间内，我在Firebug中收到了javascript构造函数错误等.

What I have is a whole bunch of divs that can be sorted using Jquery sortable, some of divs contain a TinyMCE instance. Which is all fine until you try to move a div that contains a TinyMCE instance - when you do TinyMCE seems to refresh itself and creates a new instance which you then therefore lose the data etc. And then the whole page breaks as the javascript no longer works :). During this time I get javascript constructor errors etc in Firebug.

我决定最好的方法是，当div开始被拖动时，从文本区域中删除tinymce，并将其放置在新位置，然后再插入tinymce.

What I have decided the best way to go is when the div starts to get dragged remove tinymce from the text area and when it is placed in it's new position insert tinymce back in.

我可以很好地删除它，但是在重新添加它时遇到了麻烦-随着我收到更多的构造函数错误.

I can remove it fine but having trouble adding it back in - as I get more constructor errors.

注意:TinyMCE会自动添加到我正在使用的系统中的所有文本区域中，以便尽量避免与TinyMCE发生冲突.

Note: TinyMCE automatically gets added to all my text areas within the system I'm using so trying to avoid messing with TinyMCE.

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

In the code below I'm simply targeting a specific textarea id for testing purposes.

$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" );
                            }
                    });

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

Anybody else have any other solutions? If you need more information please let me :)

推荐答案

嘿，如果您的MCE实例中已经有数据，为避免丢失，可以尝试以下操作:

Hey if you already have data in your MCE instances, to avoid losing it, you can try this:

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");
    });
}

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

In my case i classed all MCE Instances with .tinyMCE

这篇关于jQuery中的TinyMCE实例可排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！