jquery中的TinyMCE实例可排序
我很难过，很沮丧，所以有时间寻求帮助。 做了很多谷歌搜索但尚未找到适合我的解决方案。
我所拥有的是一大堆可以使用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" ); } }); 还有其他人有其他解决方案吗？ 如果您需要更多信息，请告诉我:)
嘿，如果你的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实例进行了分类
对于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')); }); }
对于任何试图动态分配“textarea1”的人来说，draggable在ui对象中是ui.item。 对于每个可排序的textarea：
tinyMCE.execCommand( 'mceAddControl', false, $('textarea',ui.item)[0].id ); tinyMCE.execCommand( 'mceRemoveControl', false, $('textarea',ui.item)[0].id );
不，没有其他解决方案。 这是它需要完成的方式。 当操作包含tinymce实例的dom元素时，您需要停用它们并在使用mceRemoveControl和mceAddControl完成dom操作时重新激活它们。
那么，对于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上设置设置类型的标志，例如：
然后使用一个加载器函数，它将分配必要的函数：
function tinymce_settings(type) { var settings; switch(type) { case 'settings_one' : settings = {...} break; } return settings; }
我最终只是在可排序的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（）上重新创建 – 因为这样你仍然拖动视觉上吸引人的编辑器。 PS使用TinyMCE 4.5.2
我有一个包含多个段落的动态表单，可以使用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); });
对我来说，工作解决方案在这里 对于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 ); }
我能够解决类似的问题：
tinymce.activeEditor.setMode（ ‘只读’）;
和
tinymce.activeEditor.setMode（ ‘设计’）;
这适用于版本4.3.x.
我已经做好了
$("#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}); } });
start: function (e, ui) { tinyMCE.execCommand( 'mceRemoveEditor', false, editor_id ); }, stop: function (e, ui) { tinymce.execCommand('mceAddEditor', true, editor_id); }
这只是我用于一个编辑器的工作。 非常感谢你 ：） 。