Discussion of Coding

Blog coding and discussion of coding about JavaScript, PHP, CGI, general web building etc.

Wednesday, January 20, 2016

Ckeditor update textarea

Author:  |   |  No comments | 

Ckeditor update textarea


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

Answer by TJ. for Ckeditor update textarea


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.

Answer by sldev for Ckeditor update textarea


Before submit do:

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

Answer by anonymous for Ckeditor update textarea


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

Answer by JohnDel for Ckeditor update textarea


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.

Answer by MohD for Ckeditor update textarea


Just Add

CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances. textAreaClientId.updateElement();});

where textAreaClientId is your instance name

Regards

Answer by Kenny Ong for Ckeditor update textarea


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();      });     });  });

Answer by Donot Don't for Ckeditor update textarea


ADD Function JavaScript for Update

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

It's work. Cool

Answer by Kuldeep Dangi for Ckeditor update textarea


All above answer are focusing on how to fix this error but I want to take the answer on what cause me this error

I had a