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

对于任何试图动态分配“textarea1”的人来说，draggable在ui对象中是ui.item。对于每种可分类的textarea：

tinyMCE.execCommand( 'mceAddControl', false,  $('textarea',ui.item)[0].id );

tinyMCE.execCommand( 'mceRemoveControl', false,  $('textarea',ui.item)[0].id );

Answer 4

对于TinyMce v.4 +，这个问题的稳定解决方案是：

start: function(e, ui){
        tinyMCE.triggerSave();
    },
    stop: function(e,ui) {

        $(this).find('textarea').each(function(){
            tinyMCE.execCommand( 'mceRemoveEditor', false, $(this).attr('id') );

            // if your tinymce instance have different settings
            tinymce.init(tinymce_settings($(this).attr('data-type')));

            tinyMCE.execCommand( 'mceAddEditor', false, $(this).attr('id') );
        });
    }

如果您的textarea应用了多种设置，则必须在每次重置前声明tinymce.init(settings)，否则最后一次应用将适用于所有设置。

设置变量的简便方法是在textarea上设置设置类型的标志，例如：

<textarea data-type="settings_one"></textarea> <textarea data-type="settings_two"></textarea>

然后使用一个加载器函数，它将分配必要的函数：

function tinymce_settings(type) {

var settings;

switch(type) {

  case 'settings_one' :
    settings = {...}
    break;
  }    
 return settings;
}

Answer 5

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

Answer 6

我最终只是在可排序的stop（）事件中销毁并重新编辑：

stop: function (e, ui) {
  $(this).find('textarea').each(function () {
    tinyMCE.get($(this).attr('id')).destroy();
    // the code below locates and evals the editor init script
    eval($(this).parents('.item').find('script').html());
  });
}

像魅力一样工作，可能是比其他建议更好的选择，以破坏start（）事件上的编辑器，然后在stop（）上重新创建 - 因为这样你仍然拖动视觉上吸引人的编辑器。附：使用TinyMCE 4.5.2

Answer 7

我有一个包含多个段落的动态表单，可以使用TinyMCE进行编辑。为了允许重新排序段落，我添加了上下移动textareas的按钮。

我设法在按钮上使用alt =“textareaid”使其工作，向上或向下移动textarea，并使用此textareaid作为mceRemoveEditor和mceAddEditor命令。 textarea必须位于class =“textarea_container”的div中。

$('.move_textarea_up').click(function(){
    var tinymceid= $(this).attr("alt");
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid);
    $(this).closest('div.textarea_container').insertBefore($(this).closest('div.textarea_container').prev());
    tinyMCE.execCommand('mceAddEditor', false, tinymceid);
}); 
$('.move_textarea_down').click(function(){
    var tinymceid= $(this).attr("alt");
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid);
    $(this).closest('div.textarea_container').insertAfter($(this).closest('div.textarea_container').next());
    tinyMCE.execCommand('mceAddEditor', false, tinymceid);
});

Answer 8

对我来说，工作解决方案就在这里。 对于TinyMCE的第4版

我的案例：我正在使用带有转发器字段的可排序jquery用于元框   在wordpress内。每个可排序元素都将textarea转换为tinyMCE编辑器。

当我从可排序的项目中移动一个元素时，编辑器内部只有一个元素被破坏且没有内容显示在视觉中   标签。我使用 mceRemoveEditor 和 mceAddEditor 来防止出现问题。

在结合上述一些解决方案后，我找到了最终的解决方案。感谢@Honorable Chow，@ pragmar @Sonicdesign嗯，你的解决方案并不适合我，所以我修改了它们。这是我的代码，对我来说很好。

start: function(e, ui){
        tinyMCE.execCommand( 'mceRemoveEditor', false,  jQuery('textarea',ui.item)[0].id );
    },
    stop: function(e,ui) {
        tinyMCE.execCommand( 'mceAddEditor', false,  jQuery('textarea',ui.item)[0].id );
    }

Answer 9

我能够解决类似的问题：

tinymce.activeEditor.setMode（＆＃39;只读＆＃39）;

和

tinymce.activeEditor.setMode（＆＃39;设计＆＃39）;

这适用于版本4.3.x

Answer 10

我已经完成了

$("#stores-container").sortable({

        stop: function(event, ui) {

            textareaID = $(ui.item).find(' textarea').attr('id');

            textareaVal=$(ui.item).find(' textarea').val();

            editorID=$(ui.item).find('.mce-container').attr('id');

            $( "#"+editorID ).remove();

            $('#'+textareaID).show();
            tinymce.init({selector: '#'+textareaID});
        }

    });

Answer 11

start: function (e, ui) {
  tinyMCE.execCommand( 'mceRemoveEditor', false, editor_id );
},
stop: function (e, ui) {
  tinymce.execCommand('mceAddEditor', true, editor_id);
}

这只是我用于一个编辑器的效果很好。非常感谢:)。

jquery中的TinyMCE实例可排序

11 个答案: