15

我很沮丧和沮丧，所以是时候寻求帮助了。做了很多谷歌搜索，但还没有找到适合我的解决方案。

我所拥有的是一大堆可以使用 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" );
                            }
                    });

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

4

11 回答 11

22

嘿，如果您的 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");
    });
}

就我而言，我将所有 MCE 实例归类为 .tinyMCE

于 2011-10-03T03:22:17.997 回答
17

对于 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'));
  });
}
于 2014-09-04T14:01:43.260 回答
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 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;
}
于 2016-11-11T23:00:45.807 回答
2

对于任何试图动态分配“textarea1”的人，可拖动对象在 ui 对象中作为 ui.item。对于每个可排序的一个文本区域：

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

tinyMCE.execCommand( 'mceRemoveControl', false,  $('textarea',ui.item)[0].id );
于 2011-01-19T19:18:11.133 回答
1

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

于 2010-10-18T07:54:41.893 回答
1

我最终只是破坏并重新创建了 sortable 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

于 2017-07-28T18:12:19.910 回答
0

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

我设法在向上或向下移动 textarea 的按钮上使用 alt="textareaid" 使其工作，并将此 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);
});
于 2014-11-06T14:35:45.363 回答
0

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

我的案例：我在 wordpress 中使用带有中继器字段的可排序 jquery 作为元框。每个可排序元素都将 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 );
    }
于 2016-02-07T14:59:38.590 回答
0

我已经做好了

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

    });
于 2016-07-08T09:08:06.917 回答
0

我能够解决类似的问题：

tinymce.activeEditor.setMode('readonly');

和

tinymce.activeEditor.setMode('design');

这适用于版本 4.3.x

于 2016-06-28T09:49:38.827 回答
0 
start: function (e, ui) {
  tinyMCE.execCommand( 'mceRemoveEditor', false, editor_id );
},
stop: function (e, ui) {
  tinymce.execCommand('mceAddEditor', true, editor_id);
}

这很好用，只是我用于一个编辑器。非常感谢 ：） 。

于 2017-02-07T07:02:49.757 回答