Getting the textarea value of a ckeditor textarea with javascript

Question

I m a learner as far as JS goes and although I ve spent a good few hours reading through tutorials which has helped lots but I m still having problems figuring out exactly how I find out what a user is typing into a ckeditor textarea   What I m trying to do is have it so that when someone types into the textarea  whatever they type appears in a div in a different part of the page   I ve got a simple text input doing that just fine but because the text area is a ckEditor the similar code doesn t work   I know the answer is here  ckEditor API textarea value but I don t know enough to figure out what I m meant to do  I don t suppose anyone fancies helping me out   The code I ve got working is       CampaignTitle   bind  propertychange input   function           titleBar   text this value         and   lt label for  CampaignTitle  gt Title lt  label gt   lt input name  data Campaign  title   type  text  id  CampaignTitle    gt    and   lt div id  titleBar  style  max-width 960px  max-height 76px   gt  lt  div gt

User · Answer

Simply execute   CKEDITOR instances elementId  getData      with element id   id of element assigned the editor

User · Answer

At least as of CKEDITOR 4 4 5  you can set up a listener for every change to the editor s contents  rather than running a timer   CKEDITOR on  instanceCreated   function event        event editor on  change   function                  trackingDiv   html event editor getData                   I realize this may be too late for the OP  and doesn t show as the correct answer or have any votes  yet   but I thought I d update the post for future readers

User · Answer

Well  You asked about get value from textarea but in your example you are using a input  Anyways  here we go       CampaignTitle   bind  keyup   function             titleBar   text   this  val           If you really wanted a textarea change your input type text to this   lt textarea id  CampaignTitle  gt  lt  textarea gt    Hope it helps

User · Answer

You could integrate a function on JQuery  jQuery fn CKEditorValFor   function  element id      return CKEDITOR instances element id  getData        and passing as a parameter the ckeditor element id  var campaign title value       CKEditorValFor  CampaignTitle

User · Answer

var campaignTitle  CKEDITOR instances  CampaignTitle   getData

User · Answer

you can add the following code   the ckeditor field data will be stored in     ELEMENT ID   val   via each click  I ve used the method and it works very well  ckeditor field data will be saved realtime and will be ready for sending       click function            ELEMENT ID   val CKEDITOR instances  ELEMENT ID   getData

User · Answer

I m still having problems figuring out exactly how I find out what a   user is typing into a ckeditor textarea    Ok  this is fairly easy  Assuming your editor is named  editor1   this will give you an alert with your its contents   alert CKEDITOR instances editor1 getData       The harder part is detecting when the user types  From what I can tell  there isn t actually support to do that  and I m not too impressed with the documentation btw   See this article  http   alfonsoml blogspot com 2011 03 onchange-event-for-ckeditor html  Instead  I would suggest setting a timer that is going to continuously update your second div with the value of the textarea   timer   setInterval updateDiv 100   function updateDiv        var editorText   CKEDITOR instances editor1 getData            trackingDiv   html editorText       This seems to work just fine  Here s the entire thing for clarity    lt textarea id  editor1  name  editor1  gt This is sample text lt  textarea gt    lt div id  trackingDiv   gt  lt  div gt    lt script type  text javascript  gt      CKEDITOR replace   editor1          timer   setInterval updateDiv 100       function updateDiv            var editorText   CKEDITOR instances editor1 getData                trackingDiv   html editorText          lt  script gt

User · Answer

i found following code working for ckeditor 5  ClassicEditor      create  document querySelector    editor           then  editor   gt            editor model document on   change data        gt                editorData   editor getData                              catch  error   gt            console error  error

[javascript] Getting the textarea value of a ckeditor textarea with javascript

Examples related to javascript

Examples related to ckeditor