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

Question

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

当我运行 A 部分，然后运行 ​​B 部分，然后再次运行 A 部分时，我得到错误:

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

A 部分

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

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