CODEWITHSUNDEEP
jqueryckeditor
w00
w00

Reputation: 26762

Load ckeditor in ajax content

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

Upvotes: 6

Views: 13385

Answers (6)

Yashar Gorgani
Yashar Gorgani

Reputation: 41

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

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

Upvotes: 0

DavidA26
DavidA26

Reputation: 161

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

Upvotes: 1

Niels Vanhorenbeeck
Niels Vanhorenbeeck

Reputation: 164

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');

Upvotes: 1

StanleyD
StanleyD

Reputation: 2368

you can use command:

CKEDITOR.replace( 'editor1' );

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

Upvotes: 4

Guest
Guest

Reputation: 71

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

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

Upvotes: 7

Rab
Rab

Reputation: 35572

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.

Upvotes: 2

Related Questions