CODEWITHSUNDEEP
javascriptjqueryfirefoxckeditor
fabien7474
fabien7474

Reputation: 16566

How to hide and show a CKEditor using jQuery?

The following code should allow to hide/show the CKEditor form

<a onClick="$('#form1').hide();">Hide</a>
<a onClick="$('#form1').show();">Show</a>
<form action="sample_posteddata.php" method="post" id="form1">
    <textarea id="editor1" name="editor1">blabla</textarea>
    <script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script>
    <input type="submit" value="Submit" />
</form>

However, this code works fine on Chrome but on Firefox, once I have toggled once the editor (one 'hide' click followed by one 'show' click) , it becomes not editable !!

How can I make it work on every browser?

Thank you.

Upvotes: 5

Views: 18145

Answers (7)

Imdadul Huq Naim
Imdadul Huq Naim

Reputation: 364

$("div[id*='cke_editor']").hide();

$("div[id*='cke_editor']").show();

For my CkEditor 4

Upvotes: 0

Ross
Ross

Reputation: 609

I found an answer at http://dizkover.com/post/67/how-to-show-hide-ckeditor-using-jquery-ckeditor-tip

So basically, you have to destory the CKEditor instance first by doing the ff:

if(typeof CKEDITOR.instances['element_name'] != 'undefined') {
    CKEDITOR.instances['element_name'].updateElement();
    CKEDITOR.instances['element_name'].destroy();
}

Upvotes: 3

beobeo88
beobeo88

Reputation: 165

<div id="container">            
    <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
</div>
<p>
    <input type="button" value="jQuery Hide" onclick="$('#container').hide('fast');" />
    <input type="button" value="jQuery Show" onclick="$('#container').show('fast');" />
</p>

Upvotes: 2

Peyote
Peyote

Reputation: 31

Solution is:

// Hide form
CKEDITOR.instances.editor1.updateElement();
CKEDITOR.instances.editor1.destroy();
$('#form1').hide();
//Show form
CKEDITOR.replace( 'editor1', {height: "220px", skin: "v2"});
$('#form1').show();

Upvotes: 3

fabien7474
fabien7474

Reputation: 16566

It doesn't seem to have a real workaround.

See here for more info. The only solution is to wait for CKEditor new version 3.4.

Upvotes: 2

shox
shox

Reputation: 1160

Try wrapped it in a div eg : <div id="fckz"> <form >...</form> </div> and make the hide show on the div .

Upvotes: 1

spinon
spinon

Reputation: 10857

Looks like this might help you out:

http://dev.ckeditor.com/ticket/544

In the report I linked to they show trying something like this:

if (frames[0]) {
  frames[0].FCK.EditingArea.MakeEditable();
}

Upvotes: 2

Related Questions