Jak odstraním tinyMCE a poté jej znovu přidám?

Snažím se přidat editor tinyMCE na svou stránku, odebrat jej a poté přidat znovu, ale dostávám chyby.

Když spustím část A, pak část B a znovu část A, zobrazí se chyba:

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

Část 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' : ''
});

Část B

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

Upravit:

Níže je uvedena úplná funkce JavaScriptu. Poprvé přes to otevře dialog a funguje, obsah je v editoru a není tam žádná chyba. Když kliknu na tlačítko Zavřít, dialogové okno se zavře. Když funkci znovu spustím, zobrazí se dialog, ale editor je prázdný a je zde výše uvedená chyba.

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

Odpověď

Chcete-li čistě odstranit instanci editoru a vyhnout se jakýmkoli chybám, použijte:

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

Chcete-li instanci znovu inicializovat, použijte:

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

Uvědomte si, že při přesouvání editorů TinyMCE v DOM musíte removeControl a addControl také, jinak to vede k chybám JS.

Od TinyMCE 4 metody k odstranění a opětovné inicializaci instance jsou nyní…

Chcete-li čistě odstranit instanci editoru a vyhnout se jakýmkoli chybám, použijte:

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

Chcete-li instanci znovu inicializovat, použijte:

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