How can I get the content of CKEditor using JQuery

Question

I m using CKEditor  I am saving the form values with ajax using page methods  But the content of CKEditor value cannot be saving into the table  I dont postback the page  What can I do for that

User · Answer

I was having issues with the getData   not working every time especially when dealing with live ajax    Was able to get around it by running   for var instanceName in CKEDITOR instances       CKEDITOR instances instanceName  updateElement        Then use jquery to get the value from the textarea

User · Answer

var value   CKEDITOR instances  YourInstanceName   getData    alert  value     Replace YourInstanceName with the name of your instance and you will get the desired results

User · Answer

I think it will be better  just serialize your form by jquery and cheers      lt form id  ajxForm  gt     lt  -- input elments here -- gt     lt textarea id  ck-editor  name  ck-editor  required gt  lt  textarea gt     lt input name  text  id  text  type  text  required gt    lt form gt    and In javascript section     CKEDITOR replace  ck-editor       extraPlugins   sourcedialog     removePlugins   sourcearea          form ajxForm   submit function e      e preventDefault      var data     this  serialize      if  data                ajax         url   post php         cache  false        type   POST         data  data        success  function e            setTimeout function               alert e              6500                         return

User · Answer

version 4 6  CKEDITOR instances editor getData

User · Answer

Easy way to get the text inside of the editor or the length of it      var editorText   CKEDITOR instances   lt    your editor ClientID   gt    getData     alert editorText     var editorTextLength   CKEDITOR instances   lt    your editor ClientID   gt    getData   length   alert editorTextLength

User · Answer

you can retreive data like this     lt script gt  var data   CKEDITOR instances editor1 getData       Your code to save  data   usually through Ajax   lt  script gt    reference   http   docs ckeditor com    guide dev savedata

User · Answer

version 4 8 0     textarea   data  ckeditorInstance   getData

User · Answer

i add ckEditor by adding DLL in toolBox    html code    lt CKEditor CKEditorControl ID  editor1  runat  server               BasePath  ckeditor  ContentsCss  ckeditor contents css               Height  250px               TemplatesFiles  ckeditor themes default theme js  FilebrowserBrowseUrl  ckeditor plugins FileManager index html               FilebrowserFlashBrowseUrl  ckeditor plugins FileManager index html  FilebrowserFlashUploadUrl  ckeditor plugins FileManager index html               FilebrowserImageBrowseLinkUrl  ckeditor plugins FileManager index html  FilebrowserImageBrowseUrl  ckeditor plugins FileManager index html               FilebrowserImageUploadUrl  ckeditor plugins FileManager index html               FilebrowserUploadUrl  ckeditor plugins FileManager index html  BackColor   FF0066                       DialogButtonsOrder  Rtl                       FontNames  B Yekan B Yekan tahoma Arial Arial  Helvetica  sans-serif  Comic Sans MS Comic Sans MS  cursive  Courier New Courier New  Courier  monospace  Georgia Georgia  serif  Lucida Sans Unicode Lucida Sans Unicode  Lucida Grande  sans-serif  Tahoma Tahoma  Geneva  sans-serif  Times New Roman Times New Roman  Times  serif  Trebuchet MS Trebuchet MS  Helvetica  sans-serif  Verdana Verdana  Geneva  sans-serif                       ResizeDir  Vertical  ResizeMinHeight  350  UIColor   CACACA  gt dhd fdh lt  CKEditor CKEditorControl gt    for get data of it   jquery   var editor       textarea iframe html body   html        alert editor

User · Answer

First of all you should include ckeditor and jquery connector script in your page    then create a textarea    lt textarea name  content  class  editor  id  ms editor  gt  lt  textarea gt    attach ckeditor to the text area  in my project I use something like this      textarea editor   ckeditor function                  toolbar                   Cut   Copy   Paste   PasteText   PasteFromWord   -   Print    SpellChecker    Scayt                  Undo   Redo                  Bold   Italic   Underline   Strike   -   Subscript   Superscript                  NumberedList   BulletedList   -   Outdent   Indent   Blockquote                  JustifyLeft   JustifyCenter   JustifyRight   JustifyBlock                  Link   Unlink   Anchor    Image    Smiley                  Table   HorizontalRule   SpecialChar                  Styles   BGColor              toolbarCanCollapse false  height   300px   scayt sLang   pt PT   uiColor     EBEBEB         on submit get the content using   var content       textarea editor    val      That s it

User · Answer

Now that jQuery adapter exists  this answer needs to be updated   Say you initiated the editor with     ckeditor   ckeditor opt  then you get the value with     ckeditor   val

User · Answer

Using Pure Vanilla Javascript   Jquery or in any javascript library   If you have Ckeditor loaded in below text-area    lt textarea name  quot editor1 quot  id  quot editor1 quot  gt  lt  textarea gt   Then you can get content inside textarea as below  var txtNotes   document getElementsByClassName  ck-content   0  innerHTML

User · Answer

To get data of ckeditor  you need to get ckeditor instance  HTML code    lt textarea class  form-control  id  reply mail msg  name  message  rows  3  data-form-field  Message  placeholder    autofocus    style  display  none   gt  lt  textarea gt    Javascript   var ck ed   CKEDITOR instances reply mail msg getData

User · Answer

use the CKEditor editor getData   call on the instance  That is to say   HTML   lt textarea id  my-editor  gt   lt input id  send  type  button  value  Send  gt      JS for CKEditor 4 0 x      send   click function         var value   CKEDITOR instances  DOM-ID-HERE   getData          send your ajax request with value        profit        JS for CKEditor 3 6 x  var editor   CKEDITOR editor replace  my-editor         send   click function         var value   editor getData           send your ajax request with value        profit

User · Answer

Thanks to John Magnolia  This is my postForm function that I am using in my Symfony projects and it is fine now to work with CK Editor   function postForm  form  callback         Get all form values   var values         var fields          for var instanceName in CKEDITOR instances         CKEDITOR instances instanceName  updateElement             each  form serializeArray    function i  field          values field name    field value              Throw the form values to the server      ajax         type           form attr  method          url            form attr  action          data          values        success       function data              callback  data

User · Answer

If you don t hold a reference to the editor  as in Aeon s answer  you can also use the form   var value   CKEDITOR instances  my-editor   getData

[jquery] How can I get the content of CKEditor using JQuery?

Examples related to jquery

Examples related to ajax

Examples related to ckeditor