Hiding TinyMCE with jQuery

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 开发者_StackOverflow中文版the jquery plugin, so this is how I set it up:

$('#container textarea').tinymce({ /* options */ });

What should I be doing differently?

---

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

---

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

---

Instead of hiding it, try sending it off screen - something like:

$('#container').css('left', '-1000px');

EDIT/UPDATE:

You could also try removing TinyMCE from the textarea before you hide() the container, and then bring it back after you show(). But you'll need to give your textarea an #ID:

//To Enable
tinyMCE.execCommand('mceAddControl', false, $("#container textarea").attr('id'));
//To Disable
tinyMCE.execCommand('mceRemoveControl', false, $("#container textarea").attr('id'));

---

Apparently it was the animation. if I show()/hide() I'm fine, but when I try to animate in tinyMCE has an issue after I finish animating, possibly trying to set options once the textarea's display isn't none.