Load ckeditor in ajax content

5
votes

I'm using CKEditor to change my textareas into a wysiwyg. It all works fine, except when i load content through an Ajax call. Then my CKEditor doesn't load.

I've searched for a solution, but couldn't find any that worked for me.

My Ajax call basically looks like this:

$.ajax({
    type: "POST",
    url: url,
      success: function(data) {
            $('#content').html(data);
            $('.ckeditor').ckeditor();
      }
});

As you can see i tried to use the function ckeditor() to programmatically load the CKEditor. But this gives me the following error:

FireFox says:

$(".ckeditor").ckeditor is not a function

And IE says:

Object doesn't support property or method 'ckeditor'

Is there any other way to load the CKEditor by class name when the content is loaded through an Ajax call??

6
jqueryckeditor
if the error message is '.ckeditor is not a function', then it means the js file for ckeditor was not loaded before. did you use $(document).ready or did you place your js snippet without the document-ready callback function at the very end of the script? - Istiaque Ahmed

6 Answers

7
votes

First you have to load the jquery adapter '/path/to/ckeditor/adapters/jquery.js'

Than $('.ckeditor').ckeditor(); will work.

4
votes

you can use command:

CKEDITOR.replace( 'editor1' );

but with one difference - editor1 is the id of the textarea and not the class.

2
votes

there is a way around to this. load your ckeditor as usual, but keep it hidden. and when contents are loaded through ajax populate the editor div and display through jquery.

1
votes

I tried the accepted answer by calling $('.ckeditor').ckeditor(); in my ajax's success propery. Yet this gave an error.

StanleyD's answer however did work.

After appending your content with ajax, try adding the following code within the ajax's success property: CKEDITOR.replace('textareaId');

1
votes

Had a simlar issue. I needed multiple areas with CKEDITOR after AJAX + appending elements to the page (those with editable properties). Spent a ton of hours to no avail and then...

I found this and added it AFTER setting contenteditable to true in those elements:

CKEDITOR.inlineAll();

Handled initializing all my CKEDITOR areas AFTER AJAX + append to page.

https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR-method-inline

0
votes

You can use done() and then() methods after ajax

$.ajax({
    type: "POST",
    url: url
}).done(function(data){
     $('#content').html(data);
}).then(function(){
     $('.ckeditor').ckeditor();
});