【问题标题】：How do I remove tinyMCE and then re-add it?如何删除 tinyMCE 然后重新添加？
【发布时间】：2011-06-06 19:19:15
【问题描述】：

我正在尝试将 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' : ''
});

B部分

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

【问题讨论】：

我不知道这个编辑器是如何工作的，但我会检查以确保当您调用 remove 时它也不会从页面中删除元素。

标签： javascript jquery html tinymce wysiwyg

【解决方案1】：

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

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

要重新初始化实例，请使用：

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

请注意，在 DOM 中移动 TinyMCE 编辑器时，您还需要 removeControl 和 addControl，否则会导致 JS 错误。

从 TinyMCE 4 开始，移除和重新初始化实例的方法现在...

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

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

要重新初始化实例，请使用：

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

【讨论】：

我在 Firefox 中收到 NS_ERROR_UNEXPECTED，你能帮我解决这个问题吗？谢谢
@Thariama ：我已经尝试了上述解决方案，但它不适用于重新初始化 tinymce 对象。但我已经固定自己添加 tinyMce.Editors = []。
@Rajnish：你使用的是 tinymce3 还是 tinymce4？
对于那些遇到@Rajnish 提到的 Firefox 的 NS_ERROR_UNEXPECTED 问题的人：升级到最新（此时为 4.4.3）版本可以修复它。

【解决方案2】：

好的。只是一个警告。

如果你有，比如说......总共 5 个文本区域，你想在其中添加/删除 tinymce 实例。

与

您想在给定页面上多次执行此操作，那么最好为您的要求寻找替代解决方案。

为什么？.. 因为即使一切正常，tinymce 的所有分离和重新连接都将花费很多时间来执行。浏览器会主动为您停止脚本等。

来源：我自己的经验，我尝试将不同的文本区域保存在单独的隐藏 div 中，并在需要时将其显示给用户。

【讨论】：

你找到替代的 js 小部件了吗？
我一直在等待这个答案。仅对 2 个 textarea 脚本进行测试就需要 300 - 400 毫秒的执行时间。尝试了多次重新初始化解决方案仍然对性能造成了巨大影响。

【解决方案3】：

这对我有用：

if (typeof(tinyMCE) != "undefined") {
  if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
    tinyMCE.editors=[]; // remove any existing references
  }
}

【讨论】：

这在 Firefox 中对我不起作用，如果您有多个编辑器，它也不起作用。
tinymce.init();不适合我...添加 tinyMCE.editors=[];在 .tinymce.init() 之前；完美运行..谢谢..!!

【解决方案4】：

上述所有解决方案都不适合我...这在我的弹出关闭事件中效果很好

var editor = tinyMCE.get('txtMailingText');
if (editor!=null) {
    editor.destroy();
}

【讨论】：

【解决方案5】：

聚会迟到了，但它可能会让人头疼。以下是在 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');

【讨论】：

这是在使用多个编辑器时也适用的最佳解决方案
@Eric 非常感谢 :D .. 我在 Firefox 的 ASP.Net 更新面板中使用 tinyMCE 并认为没有希望。谢谢
绝对是最好的解决方案。我以前使用过tinymce.execCommand('mceRemoveEditor');，但它没有重新初始化。
试过这个和这里找到的所有其他解决方案。我尝试重置菜单/按钮栏，但我的自定义菜单/按钮仍然存在，无论我做什么！
再来一次聚会 - 这是在其他线程中没有其他答案之后拯救我的原因。

【解决方案6】：

为了它的价值，我最终这样做了：

尝试在我将编辑器添加到页面之前将其删除（这适用于 chrome）
在我删除编辑器之前，触发保存。出于某种原因，这对 Firefox 很重要。

这是添加编辑器的样子：

  $(function() {
    tinymce.EditorManager.execCommand('mceRemoveEditor',true, 'fred');
    #{tinymce_javascript(:simple_editor, {height: 150, :selector => 'fred'})}
  });

  $(document).on('click', '.tinyMCE-save', function(event) {
    tinyMCE.triggerSave();
    return true;
  });

我有一个显式点击删除了编辑器：

<a href="#" class="tinyMCE-save cool-js-click-handler">Cancel</a>

【讨论】：

【解决方案7】：

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

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 上设置属性，但这更好。
您正在保存旧设置，销毁旧编辑器，创建一个新设置，然后将旧设置分配给该编辑器，但是您为页面上的每个编辑器实例执行此操作。就这么简单！
必须在 for 循环中深度克隆 tinymce.EditorManager.editors，因为 execCommand 在同步循环进行时操纵 tinymce.EditorManager.editors。

【解决方案8】：

只需更新它！

如果您正在查看此内容以重置编辑器的内容，而不是销毁它并再次对其进行初始化，您可以像这样简单地更改内容

var editor = tinymce.get('editor_id'); //the id of your textarea
editor.setContent(content);  //any html as string

【讨论】：

【解决方案9】：

删除现有的 tinymce 编辑器并添加 tinymce.EditorManager.editors 数组的新需求许可。此解决方案适用于两种情况： 1. 如果您只有一个编辑器，并且您想删除并再次添加它。 2.如果您有多个编辑器，并且您想删除一些特殊的编辑器并重新添加它。

console.log(tinymce.EditorManager.editors);

这将为您提供要删除的所需编辑器的数组和确切索引的视图。例如，上述控制台的一个示例输出可以是：

Array[2]
0:B
1:B
length:2
textarea-1:B
textarea-2:B
_proto_Array[0]

这是当我在 textareas 上有两个 tinymce 编辑器时控制台的输出：#textarea-1 和 #textarea-2 假设我想删除 #textarea-2 并重新添加它，然后可以按如下方式完成：

tinymce.EditorManager.editors.splice(1, 1);//removing second element in array.
delete tinymce.EditorManager.editors['textarea-2'];//deleting respective textarea id from array

然后你可以简单地使用 init 再次添加它：

tinymce.init({
    selector:'#ts-textarea-2'
});

如果您只有一个与 tinymce 编辑器关联的文本区域，可以说：#textarea-1，并且您想删除并重新初始化它，那么您可以清空 tinymce.EditorManager.editors：

tinymce.EditorManager.editors = [];

然后您可以按照上面的说明使用 init 命令添加。为我工作，没有任何错误。

希望对你有帮助

【讨论】：

【解决方案10】：

现在可以做

tinymce.remove("#id .class or tag");

【讨论】：

而且你不需要任何超时来再次调用 init。
和tinymce.remove() 不带参数删除所有编辑器。
这是最干净的。

【解决方案11】：

一开始我用的是：

tinymce.execCommand('mceRemoveEditor', true, id);
tinymce.execCommand('mceAddEditor', true, id);

但是这些命令是异步运行的，所以 add 命令经常会失败。作为一种解决方法，我会：

tinymce.execCommand('mceRemoveEditor', true, id);
setTimeout(function() {
    tinymce.execCommand('mceAddEditor', true, id);
}, 500);

但我讨厌这种解决方案，因为它在用户看来速度较慢，即便如此，如果计算机速度较慢，您也无法确定 500 毫秒是否足够。

现在我正在使用：

tinymce.remove(id);
tinymce.init({
    selector: id
});

我不确定为什么会这样，但它确实有效，而且这段代码没有我使用的旧代码所存在的任何异步问题。

在这里试试： https://jsfiddle.net/g0u059au/

【讨论】：

【解决方案12】：

试试这个：

 tinymce.remove();

    setTimeout(function () {
    tinymce.init(
        {
        selector: 'textarea',
        menubar: false,
        height: "300",
        plugins: [
            'advlist autolink lists link image charmap print preview anchor textcolor ksfm',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code help'
        ],
        toolbar: 'undo redo | fontselect fontsizeselect styleselect | alignleft aligncenter alignright alignjustify | bold italic underline strikethrough | link table | ksfm'
        }
        );

    }, 1);

【讨论】：

我尝试了一切：使用mceRemoveControl、mceRemoveEditor 和tinyMCE.get(...).remove()。添加一个简单的超时对我有用！谢谢

【解决方案13】：

// Remove all editors bound to divs
tinymce.remove('div');

// Remove all editors bound to textareas
tinymce.remove('textarea');

// Remove all editors
tinymce.remove();

// Remove specific instance by id
tinymce.remove('#id');

from the tinymce documentation

【讨论】：

【解决方案14】：

试试这个：

    var default_value_1 = 'test';
    var default_value_2 = 'test';

    tinyMCE.remove();

    tinyMCE.init({
        selector: '#id_element_1',
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help code',
        toolbar: "code formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat"
    }).then(function(editors){
        editors[0].setContent(default_value_1 || '');
    });

    tinyMCE.init({
        selector: '#id_element_2',
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help code',
        toolbar: "code formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat"
    }).then(function(editors){
        editors[0].setContent(default_value_2 || '');
    });

【讨论】：