Hiding TinyMCE with jQuery
Solution 1
The correct command to use here is
// editor_id is the id of your textarea and
// tinymce will use this id to uniquely identify this editor instance
editor_id = $("#container textarea").attr('id');
tinymce.get(editor_id).hide();
to make it visible again use
tinymce.get(editor_id).show();
Solution 2
This question is about hiding and showing tinymce editor but if anyone came here about removing and re-adding tinymce editor without error then my solution can work for them.
To remove existing tinymce editor and add new needs clearance of tinymce.EditorManager.editors array. This solution works in both cases : 1. If you have only one editor and you want to remove and add it again. 2. If you have multiple editors and you want to remove some special editor and add it again.
console.log(tinymce.EditorManager.editors);
This will give you a view of the array and exact index of you desired editor which you want to remove. For example one sample output of above console can be:
Array[2]
0:B
1:B
length:2
textarea-1:B
textarea-2:B
_proto_Array[0]
This is the output of the console when i have two tinymce editors on textareas : #textarea-1 and #textarea-2 Lets suppose I want to delete #textarea-2 and re-add it then it can be done as follows:
tinymce.EditorManager.editors.splice(1, 1);//removing second element in array.
delete tinymce.EditorManager.editors['textarea-2'];//deleting respective textarea id from array
Then you can add it again simply using init:
tinymce.init({
selector:'#ts-textarea-2'
});
If you have only one textarea associated with tinymce editor lets say : #textarea-1 and you want to remove and re-initialize it then you can just empty tinymce.EditorManager.editors by :
tinymce.EditorManager.editors = [];
And then you can add using init command as explained above. Worked for me without any error.
I hope it helps
23890123890
Updated on June 17, 2022Comments
-
23890123890 about 2 years
I have a TinyMCE textarea inside of
#container
When I use
$('#container').hide()
and then$('#container').show()
, tinyMCE throws:Cannot read property 'selection' of undefined
I'm using the jquery plugin, so this is how I set it up:
$('#container textarea').tinymce({ /* options */ });
What should I be doing differently?
-
Laurence Burke about 13 years@chris: Does that work on IE because if I remember correctly it doesn't like negative px's
-
23890123890 about 13 yearsAlso: I'm using jQuery's animations; so it'd be nice to use those still, rather than it just being gone
-
23890123890 about 13 yearsIs there a way to do that through the jQuery plugin? (for instance
$('#my:textarea').tinymce('disable');
). I've tried disable, but I still get the exception. I'd really prefer to handle this through the jQuery plugin -
Chris Bricker about 13 yearsTry this:
$('#container textarea').tinymce().execCommand('mceRemoveControl', false, $("#container textarea").attr('id'));
-
23890123890 about 13 yearsI'm still getting
Cannot read property 'selection' of undefined
(infinitely many times until I refresh the page) when I try to hide usingtinymce.get('textareaIDwithoutPoundSign').hide()
-
23890123890 about 13 yearsIs there a way to do that through the jQuery plugin?
-
Thariama about 13 yearsif you have only one editorinstance at your page you may use tinymce.editors[0].hide(); too. what happens?
-
23890123890 about 13 yearssame deal (
Cannot read property 'selection' of undefined
), though when I try totinymce.editors[0].show();
it, I getUncaught TypeError: Cannot read property 'createRange' of undefined
. Also I'd really prefer to use the jQuery interface if at all possible -
23890123890 about 13 yearsTo clarify: I'm using
tinymce.editors[0].hide();
and then$('#container-with-tinyMCE-in-it').hide();
to hide the container after hiding tinyMCE (it has other stuff in it) -
Chris Bricker about 13 yearsThe jQuery plugin does not have a wrapper-function for removing the editor. To my knowledge the only way is by using
execCommand()
. The example in my last comment shows how to useexecCommand()
with the jQuery plugin. Here is a forum post with explanation by the main developer of tinymce: tinymce.moxiecode.com/forum/viewtopic.php?id=19951 -
Wesley Murch about 13 yearsFor me, this only removed the TinyMCE editor instance and required an extra call to hide the textarea itself. Using the same method to
show()
it again, the extra call to show the textarea was not needed. +1, this works for me