如何删除tinyMCE，然后重新添加它？

Question

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

当我运行A部分，然后运行B部分，而不是运行A部分时，出现错误：

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

甲部

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

B部分

        js += "                        tinyMCE.getInstanceById('" + ctrl.ID + "Editor').remove();\n";

编辑：

上面是创建JavaScript的后端分支，下面是完整的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');
    }
});
}

Answer 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);