How do i remove tinyMCE and then re-add it?

tinymce remove
tinymce remove selected node
remove content tinymce editor
tinymce init
tinymce reset
tinymce get content
tinymce height
tinymce add event listener

I'm trying to add the tinyMCE editor to my page, remove it, then add it again but am getting errors.

When I run Part A, then Part B, Than Part A again I get the error:

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

Part A

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

Part B

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

Edit:

The above is the backend spinets that create the JavaScript... below is the full JavaScript function. The first time through it opens the dialog and works, the contents is in the editor and there is no error. When I click the close button, the dialog is closed. When I run the function again, the dialog displays but the editor is empty and there is the above error.

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

To cleanly remove an editor instance and avoid any errors use:

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

To reinitialize the instance use:

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

Be aware that when moving TinyMCE editors in the DOM you need to removeControl and addControl too, otherwise it results in JS errors.


As of TinyMCE 4 the methods to remove and reinitialize an instance are now...

To cleanly remove an editor instance and avoid any errors use:

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

To reinitialize the instance use:

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

Remove tinymce 4 instance by textarea ID, I want to remove a tinymce 4 instance on button click via jquery using the textarea .com/questions/4651676/how-do-i-remove-tinymce-and-then-re-add-it  Tinymce will not work when you are loading and unloading textarea/div element using ajax.tinymce is not work again on control if you do not detach tinymce from HTML input control.So in this tutorial i will provide you simple JavaScript code to add and remove tinymce on textarea/div elements.

Late to the party but it might save someone the headache. Here's what worked for me on version 4.2.4 (2015-08-17):

tinymce.EditorManager.editors = []; 

Then I could re-init an editor on the same dynamically created div

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

Add, remove and re add inside update panel not working, Problem is after page load it Tiny MCE editor works first time when clicking the add button. If I second time want to add another data then tiny mce editor is not  Remove the id attribute on the textarea; Manually destroy the tinymce instance when the remove button is clicked using tinymce.EditorManager.execCommand('mceRemoveEditor', true, $(this).parent().find('input').attr('id')); AND make sure you will never have duplicated ids (which may occur with current pattern)

This works for me:

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

Dynamically Add and remove TinyMCE editor with jQuery, If initialized then remove it using tinymce.remove('#editor') where pass the textarea id otherwise call addTinyMCE() function. NOTE – If you want  Click on the Toggle Editor button. Dynamically Add and remove TinyMCE editor with jQuery. 5. Conclusion. Use tinymce.remove () method to remove TinyMCE editor from the HTML element and again call tinymce.init () on the selector to reinitialize.

It is now possible to just do

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

How do i remove tinyMCE and then re-add it?, I'm trying to add the tinyMCE editor to my page, remove it, then add it again but am getting errors. When I run Part A, then Part B, Than Part A again I get the  These are what we’re going to hook into with add_filter to remove TinyMCE buttons. The first hook, mce_buttons, contains the IDs for the first row of buttons in the text-editor toolbar. The first hook, mce_buttons, contains the IDs for the first row of buttons in the text-editor toolbar.

In case you have more editors with different settings, this is the way to reastart them preserving settings.

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

How do i remove tinyMCE and then re-add it?, I'm trying to add the tinyMCE editor to my page, remove it, then add it again but am getting errors. When I run Part A, then Part B, Than Part A  Remove tinymce 4 instance by textarea ID I want to remove a tinymce 4 instance on button click via jquery using the textarea document. How do I go about doing so?

TinyMCE editor adds 'phantom' whitespace < Support < TWiki, When using TinyMCE editor on 4.1.2, 'phantom' whitespace is added to the end Under Firefox, attempts to delete it remove the last 'real' character in the line, and allowing space to be deleted, but then re-creates it when topic is reopened​. This id is then used in internal array - tinyMCE.editors which isn't cleared (isn't cleared if you'll use tinymce.execCommand('mceRemoveControl', true, [id]), remove actually removes editors and prevents tinyMCE to be applied ever again). As such if you have a dynamic content with tinyMCE applied, it will work once, but never again.

Not handling invalid callbacks · Issue #5635 · tinymce/tinymce · GitHub, instances of the inline editor using tinymce.remove() then re-initialize lnewson added needs: more info type: question labels 21 days ago. Hello, a beginner here. I'll be needing the space that the "File Edit View Format" dropdown menu is occupying. I cannot find the source where I will do the removal.

Remove TinyMCE warning notification on Cloud API Key, It is reasonable to create an account to get a free API key to use TinyMCE. After that, you should include your API key whenever you include its  the this page, i set a popup windows when click a button. in the popup windows, the selector is called "tinymce". the tinymce of popup is displaying at first. if click the button and open the popup again, the tinymce editor is not displaying. Then, i added tinymce.remove() in the click event function when open popup windows. the tinymce is always displaying each click.

Comments
  • Are you eval ing that or what??? Why all the js += ???
  • thats the javascript being added to my page via the backend. (i was lazy). I'll clean it up
  • I don't know how this editor works but i'd check to make sure when you call remove it isn't removing the elements from the page also.
  • ah OK, sorry it just seemed odd :)
  • I've added the full output of javascript.
  • I am getting NS_ERROR_UNEXPECTED in firefox, Can you help me on this? Thanks
  • @Thariama : I have tried above solution but it's didn't worked for re-initialize tinymce object. But i have fixed myself to adding tinyMce.Editors = [].
  • @Rajnish: are you using tinymce3 or tinymce4?
  • @Rajnish see my answer - I was able to get firefox to work by forcing tinyMCE to save before I removed it.
  • For those running into the NS_ERROR_UNEXPECTED issue with Firefox as mentioned by @Rajnish: upgrading to the latest (4.4.3 at this time) version fixes it.
  • This is the best solution that also works when using multiple editors
  • @Eric Thanks a lot :D .. I spent the whole day with my tinyMCE inside ASP.Net update panel on Firefox and thought there is no hope. Thanks
  • Definitely the best solution. I'd previously used tinymce.execCommand('mceRemoveEditor'); but it wasn't re-initializing.