Как скрыть и показать CKEditor, используя jQuery?

Question

Следующий код должен позволять скрывать / показывать форму CKEditor

<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>

Тем не менее, этот код прекрасно работает в Chrome, но в Firefox, когда я переключаю один раз редактор (один щелчок «скрыть», затем один щелчок «показ»), он становится недоступным для редактирования !!

Как я могу заставить его работать в каждом браузере?

Спасибо.

Answer 1

Я нашел ответ в http://dizkover.com/post/67/how-to-show-hide-ckeditor-using-jquery-ckeditor-tip

Так что, в основном, вы должны сначала уничтожить экземпляр CKEditor, выполнив ff:

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

Answer 2

Решение:

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

Answer 3

<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>

Answer 4

Похоже, что это не реальный обходной путь.

См. здесь для получения дополнительной информации.Единственное решение - дождаться новой версии CKEditor 3.4.

Answer 5

Похоже, это может вам помочь:

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

В отчете, на который я ссылаюсь, показано, что он пытается что-то вроде этого:

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

Answer 6

Попробуйте обернуть его в div, например: <div id="fckz"> <form >...</form> </div> и сделайте скрытое шоу на div.

Answer 7

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

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

Для моего CkEditor 4