Completely remove JQuery tinyMCE

Question

I have initialised tinyMCE like so:

$('#text').tinymce({
    // Location of TinyMCE script, optional, already loaded in page.
    script_url : '../adminContent/js/tiny_mce/tiny_mce.js',

    // General options
    theme : "advanced",
    plugins : "table,advimage,advlink,iespell,inlinepopups,preview,contextmenu,paste,visualchars",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,forecolor,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,removeformat,cleanup,code,|,preview,tablecontrols,|,hr,visualaid,|,charmap,iespell",
    theme_advanced_buttons3 : "",

    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true
});

The code above works perfectly. The problem is when I try to remove tinyMCE.

My remove code is:

$('#text').tinymce().execCommand('mceRemoveControl', false, 'text');

I've also tried:

$('#text').remove();

and

$('#text').tinymce().remove();

The first one doesn't seem to do anything. The last two give me this error:

Uncaught ReferenceError: t is not defined

Although tinymce is loaded by the HTML document, I am loading another script using:

$.getScript(viewPath + '/mod/adminContent/js/editContent.js', function(){
    initEditContent(popup);
});

popup is a reference to the popup in which tinymce is loaded. It is simply a div that is created using jquery. The contents of the div are loaded using jquery ajax.

The editContent.js looks like this:

var contentID;
function initEditContent(popup){
    contentID = $('#contentID').val();

    tinyMCE.execCommand("mceAddControl", true, 'text');

    setTimeout(reposition, 50);
    setTimeout(reposition, 150);
    setTimeout(reposition, 250);

    // Submit form
    $('#editTextForm').ajaxForm(
    {
        // Before submit
        beforeSubmit: function(){
            //setPopupMessage(popup, '<div id="loading"><img src="../../img/loading.gif" />&nbsp;Please wait...</div>');
        },

        // Once submit completed
        success: function(responseText){
            tinyMCE.execCommand("mceRemoveControl", true, 'text');
            //closePopup(popup);

            // Update button with new data
            $('#' + contentID).html(responseText);
        }
    });
}

Answer 1

This looks like an issue with tinyMCE since version 3.5b3. It works in version 3.5b2.

See my fiddle example.

You'll notice that it loads and unloads fine. But change the version to edge or 3.5b3 and you'll get the error when unloading.

As stated on the tinyMCE bug site:

Description of problem:

Javascript error on line 13518. t is not defined.

Steps to reproduce:

1. Call tinyMCE.execCommand('mceRemoveControl', false, idOfTextarea);

Problem:

In 3.5b3 you renamed t to self, but didn't rename the used variable in the same line to get the doc.

Solution:

Change line 13518 (in function hide()) to: var self = this, doc = self.getDoc();

Answer 2

Problem solved. For those that are interested, I loaded tinyMCE in the HTML document, then when I needed to initialise it, I did:

tinyMCE.init({
    mode : "textareas",
    // General options
    theme : "advanced",
    plugins : "table,advimage,advlink,iespell,inlinepopups,preview,contextmenu,paste,visualchars",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,forecolor,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,removeformat,cleanup,code,|,preview,tablecontrols,|,hr,visualaid,|,charmap,iespell",
    theme_advanced_buttons3 : "",

    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

    oninit: function(){
        alert('tinyMCE loaded');
    }
});

The above code is called every time the tinyMCE editor is required. I then removed it when I closed the popup like so:

tinyMCE.remove('text');