如何删除 tinyMCE,然后重新添加它?

IT技术 javascript jquery html tinymce wysiwyg
2021-01-30 15:56:13

我正在尝试将 tinyMCE 编辑器添加到我的页面,将其删除,然后再次添加,但出现错误。

当我运行 A 部分,然后是 B 部分,然后是 A 部分时,我收到错误消息:

Error: g.win.document is null
Source File: tiny_mce/tiny_mce.js Line: 1

甲部

tinyMCE.init({
    'mode' : 'exact',
    'elements' : '" + ctrl.ID + "Editor',
    'plugins' : 'insertdatetime,TVCMSLink,TVCMSImage',
    'theme' : 'advanced',
    'theme_advanced_layout_manager' : 'SimpleLayout',
    'theme_advanced_buttons1' : 'backcolor, forecolor, |, bold, underline, strikethrough, |, numlist, bullist, charmap, |, undo, redo, |, anchor, link, tvlink, unlink',
    'theme_advanced_buttons2' : '',
    'theme_advanced_buttons3' : ''
});

乙部

tinyMCE.getInstanceById('" + ctrl.ID + "Editor').remove();

编辑:

下面是完整的 JavaScript 函数。第一次通过它打开对话框并工作,内容在编辑器中并且没有错误。当我单击关闭按钮时,对话框关闭。当我再次运行该函数时,该对话框显示但编辑器为空并且出现上述错误。

function show_HP1B0() {
$('.EditLink').hide();
$.ajax({
    type: 'post',
    url: 'genericHandler.ashx',
    data: 'cmd=select&tableName=ExtraBlocks&id=4',
    dataType: 'json',
    success: function(data) {
        $('#HP1B0Editor').html(data['rows'][0]['Content']);
        alert($('#HP1B0Editor').html());
        tinyMCE.init({                 'mode' : 'exact', 
            'elements' : 'HP1B0Editor', 
            'plugins' : 'insertdatetime,Link,Image',
            'theme' : 'advanced',
            'theme_advanced_layout_manager' : 'SimpleLayout',
            'theme_advanced_buttons1' : 'backcolor, forecolor, |, bold, underline, strikethrough, |, numlist, bullist, charmap, |, undo, redo, |, anchor, link, tvlink, unlink',
            'theme_advanced_buttons2' : '',
            'theme_advanced_buttons3' : ''
        });
        var dlg = $('#ctl00_EXTRA_HTML_0_HP1B0Editor').dialog({
            modal: false,
            draggable: false,
            position: 'center',
            zIndex: 99999,  // Above the overlay
            width: 370,
            title: 'Content Block Editor',
            closeText: '',
            open: function () {
                $('body').css('overflow', 'hidden');
                if ($.browser.msie) { $('html').css('overflow', 'hidden'); } $('<div>').attr('id', 'loader').appendTo('body').show();
            },
            close: function () { $('body').css('overflow', 'auto'); if ($.browser.msie) { $('html').css('overflow', 'auto'); } $('#loader').remove(); },
            buttons: {
                'Save': function () {
                    tinyMCE.getInstanceById('HP1B0Editor').remove();
                    $('.EditLink').show();
                    $(this).dialog('close');
                },
                'Cancel': function () {
        alert('HP1B0Editor');
                    tinyMCE.getInstanceById('HP1B0Editor').remove();
                    $('.EditLink').show();
                    $(this).dialog('close');
                }
            }
        }).parent();
        dlg.appendTo(jQuery('form:first'));
    },
    error: function(data) {
        $('.EditLink').show();
        $('#HP1B0Editor').html('Error');
    }
});
}
6个回答

要彻底删除编辑器实例并避免任何错误,请使用:

tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);

要重新初始化实例,请使用:

tinymce.EditorManager.execCommand('mceAddControl',true, editor_id);

要知道,在DOM移动TinyMCE的编辑器,当你需要removeControladdControl过,否则会导致JS错误。


TinyMCE 4 开始,删除和重新初始化实例的方法现在是......

要彻底删除编辑器实例并避免任何错误,请使用:

tinymce.EditorManager.execCommand('mceRemoveEditor',true, editor_id);

要重新初始化实例,请使用:

tinymce.EditorManager.execCommand('mceAddEditor',true, editor_id);
@Thariama :我已经尝试过上述解决方案,但它不适用于重新初始化 tinymce 对象。但我已经固定自己添加tinyMce.Editors = []。
2021-03-16 15:56:13
@Rajnish 看到我的答案 - 我能够通过在删除之前强制 tinyMCE 保存来让 Firefox 工作。
2021-03-20 15:56:13
对于那些遇到@Rajnish 提到的 Firefox NS_ERROR_UNEXPECTED 问题的人:升级到最新(此时为 4.4.3)版本修复了它。
2021-03-21 15:56:13
我在 Firefox 中收到 NS_ERROR_UNEXPECTED,你能帮我解决这个问题吗?谢谢
2021-04-09 15:56:13
@Rajnish:你使用的是 tinymce3 还是 tinymce4?
2021-04-09 15:56:13

聚会迟到了,但它可能会让某人头疼。以下是 4.2.4 (2015-08-17) 版本对我有用的内容:

tinymce.EditorManager.editors = []; 

然后我可以在同一个动态创建的 div 上重新初始化一个编辑器

tinymce.init({selector:"#text"});   

编辑 : 2020-06-20

使用版本:5.2.x,做

 tinymce.activeEditor.destroy();
 

或者

 tinymce.remove('#myeditor');
再参加聚会 - 这是在没有其他线程中的其他答案之后拯救我的原因。
2021-03-15 15:56:13
绝对是最好的解决方案。我以前使用过,tinymce.execCommand('mceRemoveEditor');但没有重新初始化。
2021-03-31 15:56:13
尝试了这个以及在此处找到的所有其他解决方案。我尝试重置菜单/按钮栏,但我的自定义菜单/按钮仍然存在,无论我做什么!
2021-04-08 15:56:13
这是在使用多个编辑器时也适用的最佳解决方案
2021-04-10 15:56:13
@Eric 非常感谢 :D .. 我在 Firefox 上的 ASP.Net 更新面板中使用了我的 tinyMCE 一整天,并认为没有希望。谢谢
2021-04-13 15:56:13

这对我有用:

if (typeof(tinyMCE) != "undefined") {
  if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
    tinyMCE.editors=[]; // remove any existing references
  }
}
这在 Firefox 中对我不起作用,如果您有多个编辑器,它也不起作用。
2021-03-29 15:56:13
tinymce.init(); 不适合我...添加 tinyMCE.editors=[]; 后 在 .tinymce.init() 之前;完美运行..谢谢..!!
2021-04-05 15:56:13

现在可以做

tinymce.remove("#id .class or tag");
而且您不需要任何超时来再次调用 init。
2021-03-26 15:56:13
并且tinymce.remove()没有参数删除所有编辑器。
2021-03-30 15:56:13
这是最干净的。
2021-04-05 15:56:13

如果您有更多具有不同设置的编辑器,这是重新启动它们以保留设置的方法。

tinymce.EditorManager.editors.forEach(function(editor) {
    // code injection
    var old_global_settings = tinymce.settings;
    tinymce.settings = editor.settings;
    tinymce.EditorManager.execCommand('mceRemoveEditor', false, editor.id);
    tinymce.EditorManager.execCommand('mceAddEditor', false, editor.id);
    tinymce.settings = old_global_settings;
});
这对我很有用,给了我一种让编辑器只读的方法。还有很多其他建议说在 iframe 上设置属性,但这效果更好。
2021-03-17 15:56:13
您正在保存旧设置,销毁旧编辑器,创建一个新编辑器,然后将旧设置分配给该编辑器,但您要为页面上的每个编辑器实例执行此操作。就这么简单!
2021-03-31 15:56:13
在同步循环tinymce.EditorManager.editors进行时,必须对 for 循环进行深度克隆作为execCommand操作tinymce.EditorManager.editors
2021-03-31 15:56:13