CKEditor's SetData doesn't work in version 4 -

ckeditor cdn
ckeditor 5
ckeditor download
ckeditor github
ckeditor documentation
ckeditor demo
ckeditor integration
django-ckeditor demo

I'm in the process of upgrading to CKEditor version 4.5.8. I use jQuery to access the CKEditor API.

The textarea of the editor doesn't update. Is there a config option I need to set?

Html:

<textarea name="mck_1" id="mck_1"> Enter text. </textarea>
<script> CKEDITOR.replace( 'mck_1' ); </script>

Javascript:

CKEDITOR.instances.mck_1.setData("Hello");

How do I debug this? Do I have to explicitly update the display/textarea?

If I try to manually update the textarea in Firebug, it says "undefined".

CKEDITOR.instances.mck_1.setData("hi");
undefined

There are a lot of "setData not working" questions for past versions of CKEditor in StackOverflow but none of the suggested solutions there work for me.

Help!

MMiz

EDIT: I realized the first "setData" on the textarea actually works. It's the second one that follows that does not display. From this thread

1: http://ckeditor.com/forums/Support/Second-Time-jQuery-Doesnt-Work it seems like there is some timing thing. But that's as far as I've gotten.

As it turns out the answer was in the CKEditor documentation (yeah I know - RTFM first). The underlying cause for this behavior is that setData method is asynchronous and so you need to code accordingly.

http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData

Quote: "Note that this method is asynchronous. The callback parameter must be used if interaction with the editor is needed after setting the data."

In my case since I'm trying to setData twice in a row, I definitely need to have a callback. It now works.

guide License - License, ! They do not include adware or limited trial periods, and can be used in commercial projects. CKEditor 4 is the most stable, reliable solution on the market since its launch in 2012. It has been actively improved since then. It has been actively improved since then. Wide browser support including legacy browsers .

$('textarea').each(function () {
   var $textarea = $(this);
   CKEDITOR.instances[$textarea.attr('name')].setData($textarea.val());
});

instaed of getting the data from ckeditor and setting back to editor make use of textarea and iterate and get all data and set to each ckeditor,,,before iterate create a instance of CKEDITOR

Installation, the ckeditor5-build-classic-1.0. 0. zip file for the Classic editor build. CKEditor module & CKEditor, the editor - the difference. To avoid confusion, read this (mainly Drupal 6 users): the module ckeditor that is available here for download is a wrapper for the editor downloaded from the ckeditor.com site (for Drupal 7, this step is no longer needed as CKEditor is taken by default from CDN). After the two archives

This -> http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData

Replace:

CKEDITOR.instances.editor1.updateElement();

With:

CKEDITOR.instances['editor1'].setData(response, {
                    callback: function() {
                    this.checkDirty(); // true
                    }
                } );

CKEditor, CKEditor (formerly known as FCKeditor) is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications. Its core  CKEditor 4 . A highly configurable WYSIWYG HTML editor with hundreds of features, from creating rich text content with captioned images, videos, tables, or media embeds to pasting from Word and drag&drop image upload. Supports a broad range of browsers, including legacy ones. Getting Started npm install --save ckeditor Use it on your website:

CKEditor Ecosystem · GitHub, CKEditor Ecosystem has 97 repositories available. Follow their code on GitHub. CKEditor is an online rich text editor that can be embedded inside web pages. It is a WYSIWYG (What You See Is What You Get) editor which means that the text edited

ckeditor/ckeditor4: The best enterprise-grade WYSIWYG , The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins. - ckeditor/ckeditor4. Django CKEditor ¶ NOTICE: django-ckeditor 5 has backwards incompatible code moves against 4.5.1. File upload support has been moved to ckeditor_uploader. The urls are in ckeditor_uploader.urls, while for the file uploading widget you have to use RichTextUploadingField instead of RichTextField. Django admin CKEditor integration.

CKEditor, CKEditor is the far superior successor of FCKeditor. The editor has been rebranded and completely rewritten. It is now much faster (the code has  CKEditor 5 . A set of ready-to-use rich text editors created with a powerful framework. Made with real-time collaborative editing in mind. Table of contents

Comments
  • why you make it so complex and where the editor id , and what exactly you are trying to do
  • @noni - I'm trying to programmatically input data into the editor using jQuery. The id of the editor is "mck_1".
  • Where are you calling setData? Perhaps it's before the textarea has been converted to a ckeditor instance? For testing, add a button on your page with its onclick event set to CKEDITOR.instances.mck_1.setData('Hello') and see what happens when you click the button after the editor has fully loaded.
  • @Atzmon - I check to see that ckeditor is loaded before writing into it. I just noticed an odd thing - if I "getData" on the textarea after my seemingly failed "setData" it returns the updated text "hi". So, it's just not displaying the updated text. Any ideas? Thanks!
  • @user1072910 Sorry, no idea. This may be a problem specific to your implementation so if you post a stripped down bare bones working example of your code, maybe someone can help.
  • In my case I was trying to set the editor contents to null using setData(), which wasn't working. It turns out I had to pass an empty string instead.