user007
user007

Reputation: 3243

TinyMCE 4 - remove() or destroy()

I am using TinyMCE editor. I want to remove or destroy tinymce editors (Page contain more then one editor). Also remove classes and IDs added by tinyMCE.

But leave editable contents

I tried :

tinymce.remove()
tinymce.destroy()
tinymce.execCommand('mceRemoveControl',true,'.editable');

Please note:

my editor class is .editable, And I have more then one editors in my page.

Upvotes: 38

Views: 98399

Answers (16)

CodeBon
CodeBon

Reputation: 1154

Get or fine a reference to your editorID then: tinyMCE.get(editorID).remove();

I use this where there are many TinyMCE instances running on a single page and it would cause significant issues if they were not removed properly.

Upvotes: 0

Mahesh Pawar
Mahesh Pawar

Reputation: 11

By simply using this you can remove TinyMCE editor:

tinymce.remove('#your_textarea_id');

Upvotes: 1

null_logic
null_logic

Reputation: 125

When using the tiyMCE.init({}) fuction, the answer by @nikmauro works for me, so for every unload of the page, you just trigger the tinymce.get("real_element_id").remove();

That method works for me.

BTW, I amusing this version

//tinymce.cachefly.net/4.1/tinymce.min.js 

Upvotes: 0

Grim
Grim

Reputation: 1976

Fake a virgin website

TinyMCE will check if its already loaded in window.scripts. If you remove the according entry TinyMCE will behave like it is a untouched document.

function cleanTinyMCE() {
  for (var i=0; i < window.scripts.length; i++) {
    if (window.scripts[i].match('.*tinymce.*js.*')){
      delete window.scripts[i];
      return;
    }
  }
}

Upvotes: 1

Michele Caggiano
Michele Caggiano

Reputation: 325

You need simply use this code in order to remove all the editable textarea:

tinyMCE.remove(".editable");

Here more info about tinyMCE remove: http://archive.tinymce.com/wiki.php/api4:method.tinymce.EditorManager.remove.static

Upvotes: 4

eithed
eithed

Reputation: 4320

Bear in mind that if given textarea has an id, tinyMCE will use it for some strange reason, even if selector parameter has been used to apply editor to given element. 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. To resolve this you need to clean this array manually per delete tinyMCE.editors[$(node).getAttribute('id')]

Upvotes: 6

nikmauro
nikmauro

Reputation: 703

The following code is working

tinymce.get(id).remove();

Upvotes: 19

Mem Maina
Mem Maina

Reputation: 19

if (typeof tinyMCE != 'undefined') {
    if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
        tinyMCE.editors=[]; 
    }
    tinyMCE.editors=[]; tinymce.init({selector:'textarea',  plugins : 'advlist autolink link image lists charmap print preview'});
}else{
    tinymce.init({selector:'textarea',  plugins : 'advlist autolink link image lists charmap print preview'});
}

Upvotes: 0

Janak Bhatta
Janak Bhatta

Reputation: 645

Simply use

tinymce.remove()

to remove all editors.

Upvotes: 10

JensB
JensB

Reputation: 6850

Little late to the party but I recently added tinyMCE jQuery version to my angular project. For a few reasons I did not want to use the angular 3rd party code and just wanted the jQuery version to work.

So here is my code for making TinyMCE 4.x work in angular, even with ng-repeat.

All you have to do is decorate your textareas with the class "TinyMCEEditorBox" and call this method anytime you remove or add items that result in an update (such as more items being added to an ng-repeat).

$scope.RebindTinyMCE = function ()
{
    var tmceSelector = ".TinyMCEEditorBox";

    for (var i = tinymce.editors.length - 1 ; i > -1 ; i--)
    {
        tinyMCE.execCommand("mceRemoveEditor", true, tinymce.editors[i].id);
    }

    setTimeout(function () {
        $(tmceSelector).tinymce({
            menubar: false,
            statusbar: false,
            toolbar: 'bold italic underline | alignleft aligncenter alignright | bullist numlist outdent indent | link',
        });
    }, 50);
}

Upvotes: 1

Akshay Vijay Jain
Akshay Vijay Jain

Reputation: 15945

we were getting error on calling
elementReference.destroy() // destroy is a dojo function
we replaced that code with
elementReference.domNode.remove()
we were also using tinymce.min.js, and it was giving us NS_ERROR_UNEXPECTED

Upvotes: 0

george
george

Reputation: 31

tinymce.EditorManager.remove() This was working for me

Upvotes: 3

blacksunshineCoding
blacksunshineCoding

Reputation: 746

If you have multiple Instances of TinyMCE you can use following code snippet to close every instance of TinyMCE:

for (var i = tinymce.editors.length - 1 ; i > -1 ; i--) {
    var ed_id = tinymce.editors[i].id;
    tinyMCE.execCommand("mceRemoveEditor", true, ed_id);
}

I use it before the Ajax Content is loaded.

Upvotes: 3

Martin Sansone - MiOEE
Martin Sansone - MiOEE

Reputation: 4399

Just in case anybody arrived here who is using the jQuery version of TinyMce use the following instead to remove an instance:

$("#textarea_id").tinymce().remove();

Upvotes: 31

assassinatorr
assassinatorr

Reputation: 671

I had the same problem. In v4 all suggestions above did not work for me, but this did:

tinymce.remove("div.editable");

... regenerated HTML dynamicaly ...

tinymce.init(...);

I use inline editor:

tinymce.init({
    selector: "div.editable",
    inline: true,
    plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste"
    ],
    menubar: false,
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"});

Hope this helped

Upvotes: 57

Thariama
Thariama

Reputation: 50832

You need an editor id (which usually equals your editor html root elements id (in most cases a textarea)).

Example:

tinymce.execCommand('mceRemoveControl', true, 'my_original_textarea_id');

Upvotes: 21

Related Questions