Geek Answers Handbook

Download ckeditor to ajax content

I am using CKEditor to change my text field in wysiwyg. Everything works fine, except when I load content through an Ajax call. Then my CKEditor does not load.

I was looking for a solution, but could not find anything that would work 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 using the ckeditor () function to programmatically load CKEditor. But this gives me the following error:

Firefox says:

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

And IE says:

The object does not support the property or method 'ckeditor'

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

+4
source share
5 answers

there is a way to this. upload your ckeditor as usual, but keep it hidden. and when the content is loaded via ajax, populate the div editor and display through jquery.

+2
source

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

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

+6
source

you can use the command:

 CKEDITOR.replace( 'editor1' );

but with one difference - editor1 is the identifier of the text field, not the class.

+4
source

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

StanleyD's answer however did the job.

After adding your content using ajax, try adding the following code to the ajax success property: CKEDITOR.replace('textareaId');

+1
source

There was a simlar problem. I needed several areas with CKEDITOR after adding AJAX + elements to the page (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 these elements:

CKEDITOR.inlineAll();

Process initialization of all my areas CKEDITOR AFTER AJAX + add to page.

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

+1
source

More articles:


All Articles