How do I remove tinyMCE and then re-add it?
Solution 1
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);
Solution 2
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"});
Edit : 2020-06-20
With version: 5.2.x, do
tinymce.activeEditor.destroy();
or
tinymce.remove('#myeditor');
Solution 3
This works for me:
if (typeof(tinyMCE) != "undefined") {
if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
tinyMCE.editors=[]; // remove any existing references
}
}
Solution 4
It is now possible to just do
tinymce.remove("#id .class or tag");
Solution 5
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;
});
Comments
-
Justin808 over 3 years
I am 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
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' : '' });
Part B
tinyMCE.getInstanceById('" + ctrl.ID + "Editor').remove();
Edit:
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'); } }); }
-
TheFoxLab about 9 yearsI am getting NS_ERROR_UNEXPECTED in firefox, Can you help me on this? Thanks
-
TheFoxLab about 9 years@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 = [].
-
Thariama about 9 years@Rajnish: are you using tinymce3 or tinymce4?
-
TheFoxLab about 9 years@Theriama: I've used tinymce4
-
Thariama about 9 yearscan you show your code or maybe create a tinymce fiddle for your issue?
-
jdhildeb over 8 yearsThe TinyMCE 4.x solution worked for me as-is. I'm using version 4.2.
-
Stijn Van Antwerpen over 8 yearsThis did not work for me in Firefox and it doesn't work if you have more than one editor.
-
Stijn Van Antwerpen over 8 years@Rajnish see my answer - I was able to get firefox to work by forcing tinyMCE to save before I removed it.
-
eztam over 8 yearsThis is the best solution that also works when using multiple editors
-
Blair Connolly over 8 yearsThis worked great for me, gave me a way to make the editor read only on the fly. There are plenty of other suggestions out there that say to set the property on the iframe, but this works MUCH better.
-
KingRider about 8 yearsits not work a lastest version, my opinion add div after textarea, example <div id=edit><textarea></textarea></div> to call re-add $('div#edit').html('<textarea></textarea>') ... basic is work and not try remove!
-
hsobhy about 8 years@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
-
RestlessWeb almost 8 yearsAs a quick reference for any WP devs here, the main editor id is "content" so it would be
tinymce.EditorManager.execCommand('mceRemoveEditor',true, 'content');
andtinymce.EditorManager.execCommand('mceAddEditor',true, 'content');
. This will reset the main TinyMCE on post / page edit. -
Thariama almost 8 yearstinymce takes the id of the tinymce source dom element and uses that one as the editor id. if the dom elment had no id then 'content' is used
-
Pasha Skender almost 8 yearsDo you happen to know where in the tynmce editor lifecycle this fits? It does not cause the oninit event to fire for tinymce editor , making me think that the editor is never destroyed or re initialized. However all the events that I have bound in the on init previously to using removeEditor, no longer fire.
-
matus almost 8 yearsDid you find alternative js widget?
-
lintuxvi over 7 yearsDefinitely the best solution. I'd previously used
tinymce.execCommand('mceRemoveEditor');
but it wasn't re-initializing. -
Jonny over 7 yearsTried this and all other solutions found here. I try to reset the menu/button bars but my custom menus/buttons remains, whatever I do!
-
Michielvv over 7 yearsFor 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.
-
BrianLegg over 7 yearsThis worked perfectly for my situation. I am loading a tinymce control in a modal dynamically and if the user closed and opened again the control would try to rebind and would break. By removing the editor on close I can rebind on open and everything works. Thanks
-
ESR over 7 yearsOne more to the party - this is what saved me after no other answers in no other threads would.
-
Krunal Dave over 7 yearstinymce.init(); not work for me...After add tinyMCE.editors=[]; before .tinymce.init(); works perfectly..thanks..!!
-
rioted over 7 yearsYou're saving the old settings, destroying the old editor, making a new one and then assigning the old settings to this editor, but you do this for each editor instance on the page. It's easy as that!
-
Hao Chang almost 6 yearsGotta deep clone
tinymce.EditorManager.editors
for the for loop asexecCommand
manipulatestinymce.EditorManager.editors
while the sync loop is going on. -
Gregor Ažbe over 5 yearsAnd you don't need any timeout to call init again.
-
arlomedia over 5 yearsAnd
tinymce.remove()
with no argument removes all editors. -
DerpyNerd about 5 yearsI tried everything: using
mceRemoveControl
,mceRemoveEditor
andtinyMCE.get(...).remove()
. Adding a simple timout worked for me! Thanks -
Mustafa Ehsan Alokozay over 4 yearsThis is the cleanest one.
-
Anuj Shrestha about 3 yearsi was waiting for this answer. Just testing on 2 textarea script took 300 - 400ms for execution. Tried multiple reinitialize solution still had this huge performance hit.
-
N. Djokic almost 3 yearsThank you, this worked for me as well for version 4.2!
-
gerl over 2 yearswhy is the setTimeout needed?