How to show / hide CKEditor using JQuery? #CKEditor_tip


Updated September 4, 2015 ● 4,649 views

CKEditor will not be editable after you hide an element, even the parent div. To go around this, you need to destroy the CKEditor instance first then define it again.

For example:

//first check if textarea element already a CKEditor, then destroy it
if(typeof CKEDITOR.instances['element_name'] != 'undefined') {
    CKEDITOR.instances['element_name'].updateElement();
    CKEDITOR.instances['element_name'].destroy();
}

//make the textarea element a CKEditor
CKEDITOR.replace( 'element_name' );

//show hidden element, in this case a div element was hidden
$('#MyForm').show();

 

3 Comments

Sort by Best Controversial New
 
2

Thank you for this tip! Definitely helped me implementing it.

admin · 10 years ago
permalink · reply (0)
0

Is CKEditor better than TinyMCE?

Joomla · 10 years ago
permalink · reply (1)
0

@Joomla: I tried TinyMCE... I think it's to combuluted. I am currently using Markdown. But I'm thinking of switching to a Wysiwyg since my users find it complicated.

master_yii · 10 years ago
permalink · reply