CKEditor disappears after second ajax load

Question

I'm getting this code via ajax:

<script>
$(function(){
$('#responseContent').ckeditor();
});
</script>
<textarea id='responseContent'></textarea>

It successfully generates a CKEditor pane for beautiful text editing.

When this same piece of code is called a second time, I get a blank area. Oddly, when I do an "inspect element" on where the textarea/ckeditor should be, it says:

<textarea id="responseContent" style="visibility: hidden; "></textarea>

So, being the professional hack that I am, I jQuery'd it so be visibility:visible. The CSS stuck but the results didn't look any different.

How do you make ckeditor work... all the time... with ajax generated data?

EDIT: Just to be clear, I don't believe this is a CSS issue. I believe it's a jquery/ckeditor issue.

Yes but the problem exists when using a classname instead, so it's not a duplicate ID issue. It seems to be that the ckeditor instance exists and I'm trying to replicate it. Still unsolved... — Flat Cat, Apr 20 '11 at 20:46

score 7 · Accepted Answer · edited May 23 '17 at 10:24

7

Found answer here: CKEditor instance already exists

if(CKEDITOR.instances[editorName]) {
delete CKEDITOR.instances[editorName];
CKEDITOR.replace(editorName);
}

One thing that I wasn't sure of (being a ckeditor noob) was the "editorName". This is the ID of the element that it is created on. I believe it could be the classname as well, if you used that to create it.

So, in my example in the original question:

<script>
    $(function(){
    $('#responseContent').ckeditor();
});
</script>
<textarea id='responseContent'></textarea>

I would fix it like this:

if(CKEDITOR.instances["responseContent"]) {
    delete CKEDITOR.instances["responseContent"];
    // I replaced this step
    // CKEDITOR.replace("responseContent");
    // With this:
    $('#responseContent').ckeditor();
}

edited May 23 '17 at 10:24

Community

1
1

answered Apr 21 '11 at 15:11

Flat Cat

886
4
13
23

shouldn't the `$('#responseContent').ckeditor();` line be outside the `if` statement ? or why to call the `ckeditor()` method twice? – Istiaque Ahmed Nov 20 '12 at 10:07
Hi your answer is useful to me . Thanks for that . But one thing also need to do it that I had to add Jquery.js file from ckeditor/adapters that . I can't understand this behaviour . If you know anything than let me know. – Dilip Langhanoja Sep 27 '13 at 13:26

score 1 · Answer 2 · answered Mar 13 '13 at 07:48

This script can help you with ajax loaded textareas with '.ckeditor' class:

$('#edytuj_promocje').load('your_php_file_with_ckeditor_textarea.php', function(){

   $.each(CKEDITOR.instances, function(){
     eval("CKEDITOR.instances."+this.name+".destroy(true)");
   });
   $('.ckeditor').each( function(){ 
    CKEDITOR.replace(this);
   });
});

score 0 · Answer 3 · answered Sep 30 '12 at 07:09

0

The correct way is like this:

jQuery.each(CKEDITOR.instances, function(){
     eval("CKEDITOR.instances."+this.name+".destroy(true)");
});

answered Sep 30 '12 at 07:09

Billy

788
1
8
17

1

eval? you must be kidding me. – AlfonsoML Sep 30 '12 at 10:33

score 0 · Answer 4 · answered Apr 20 '11 at 19:47

0

I'm guessing that you're trying to populate the same instance of ckeditor with different content, correct?

If so, then there are other methods to change that content. Trying to create an additional instance will cause you problems.

http://ckeditor.com/blog/CKEditor_for_jQuery

Scroll down to 'Code interaction with editor instances'

answered Apr 20 '11 at 19:47

ScottE

21,530
18
94
131

Yes, I am. I can see where that "editor instances" is going, but the documentation seems to be quite skimpy. It seems that I need to check for an instance, if it exists then use it. How do I write that code? – Flat Cat Apr 20 '11 at 20:28
Try $('#responseContent').val('some new html content'); – ScottE Apr 20 '11 at 20:35
That just writes text into the editor. I'm trying to get the actual instance of the editor. – Flat Cat Apr 20 '11 at 20:42
Found answer here: http://stackoverflow.com/questions/1794219/ckeditor-instance-already-exists if(CKEDITOR.instances[editorName]) delete CKEDITOR.instances[editorName]; CKEDITOR.replace(editorName); – Flat Cat Apr 20 '11 at 21:12

CKEditor disappears after second ajax load

4 Answers4