Ckeditor update textarea

Question

I am trying to get the ckeditor working. Obviously it doesn't make use of the textarea so on submit the form doesn't submit the text in the editor. Beceause I make use of polymorphic associations etc. I can't make a onsubmit function to get the value of the textarea (when the form is submitted) .

So I found this question: Using jQuery to grab the content from CKEditor's iframe

with some very good answers. The answers posted there keep the textarea up to date. That is very nice and just what I need! Unfortunately I can't get it to work. Does somebody know why (for example) this doesn't work?

I have a textarea (rails but it just translates to a normal textarea):
<%= f.text_area :body, :id => 'ckeditor', :rows => 3 %>

And the following js:

if(CKEDITOR.instances.ckeditor ) {
  CKEDITOR.remove(CKEDITOR.instances.ckeditor);
}
CKEDITOR.replace( 'ckeditor',
{
skin : 'kama',
toolbar :[['Styles', 'Format', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', 'Link']]});


CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);

//and paste event
this.document.on("paste", CK_jQ);
}

function CK_jQ()
{
 CKEDITOR.instances.ckeditor.updateElement(); 
}

I get the following "error" in my firebug.
missing ) after argument list [Break on this error] function CK_jQ()\n

Solution 1

have you figured it out?

I'm using CKEditor version 3.6.1 with jQuery form submit handler. On submit the textarea is empty, which to me is not correct. However there is an easy workaround which you can use, presuming all your CKEditor textareas have the css class ckeditor.

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

Execute the above before you do your submit handling ie. form validation.

Solution 2

Before submit do:

for(var instanceName in CKEDITOR.instances)
    CKEDITOR.instances[instanceName].updateElement();

Solution 3

Combination of all of the above answers into one.

Create a new custom.js file and add this:

CKEDITOR.on('instanceReady', function(){
  $.each( CKEDITOR.instances, function(instance) {

    CKEDITOR.instances[instance].on("instanceReady", function() {
      this.document.on("keyup", CK_jQ);
      this.document.on("paste", CK_jQ);
      this.document.on("keypress", CK_jQ);
      this.document.on("blur", CK_jQ);
      this.document.on("change", CK_jQ);
    });
  });

});

function CK_jQ() {
  for ( var instance in CKEDITOR.instances ) { CKEDITOR.instances[instance].updateElement(); }
}

You don't have to worry about the name of the textarea, just add a class ckeditor in the textarea, the above and you are done.

Solution 4

Thanks @JohnDel for the info, and i use onchange to make it update every change.

CKEDITOR.on('instanceReady', function(){
   $.each( CKEDITOR.instances, function(instance) {
    CKEDITOR.instances[instance].on("change", function(e) {
        for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
    });
   });
});

Solution 5

ADD Function JavaScript for Update

function CKupdate() {
  for (instance in CKEDITOR.instances)
    CKEDITOR.instances[instance].updateElement();
}

It's work. Cool

View more solutions

Comments

[Eduard7]

Same solution for prototype: $$('textarea._cke').each( function(T) { T.update( CKEDITOR.instances[T.id].getData() ); } );

[Bajrang]

@TJ- I am new in Jquery, I dont know how it works ? Could you please write a line of code that alerts the value of ckeditor ? i am trying with :- alert($textarea.val(CKEDITOR.instances[$textarea.attr('name'‌​)].getData())); . Please...

[T. Junghans]

@J.J. Before you alert assign the jquery object of your textarea to $textarea. var $textarea = $('textarea.mytextarea'); Then use alert(CKEDITOR.instances[$textarea.attr('name')].getData()). Do this after the ckeditor has been applied.

[NightMICU]

Thanks, saved me a lot of time

[Alex Angelico]

I think you have to use $textarea.html() instead of .val()

[Ben Amada]

getData() and val() work perfectly fine, but see answer by sldev where he uses CKEDITOR's updateElement().

[Joel Peltonen]

But the OP already calls updateElement all the time and it still didn't work for OP, that's possibly why this isn't the answer here.

[xtds]

@Nenotlep: the accepted answer is basically the same but is a workaround for my answer since CKEDITOR already provides that with updateElement

[Joel Peltonen]

@sldev: I agree that your solution is better, I was trying to point out that he already called updateElement() in his solution, although in a not so logical as your place before submit :)

[András Szepesházi]

Works great. What beats me is why CKEditor's default save action does not work this way.

[Mhmd]

after loading editor by replace, you may add this line >>> CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances.textAreaClientId.updateElement‌​();});

[Mark]

I had to use: $('textarea.ckeditor').each(function () { var $textarea = $(this); $textarea.val(CKEDITOR.instances[$textarea.attr('id')].getDa‌​ta()); }); The instance was named by the fields ID not name. But it seems a more supported solution as mentioned above by Ben Amada is: for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement();

[Nigel Angel]

Just in case anyone reading this needs to do it for FCKeditor, the cases are different: $(this).val(FCKeditorAPI.Instances[this.id].GetData());

[t.mikael.d]

I wish CKEDITOR did this by default, i can't really see any reason not to?

[flu]

instanceReady is triggered for every editor instance that you have. So if you have multiple instances this will bind the onChange event multiple times doing a lot of unnecessary work. Instead of the $.each(...) you should use make use of the event parameter that is provided to the instanceReady callback and take its editor attribute which is the editor instance that has just called its instanceReady event.

[JDandChips]

This is quite useful if you want to Encode the HTML before it goes into the textarea

[AllThisOnAnACER]

This one also works on multiple textareas, loaded by ajax and using CKEDITOR.replace('item', language).

[zanderwar]

Don't forget if (CKEDITOR.instances.hasOwnProperty(instanceName)) {