'How to get ckeditor textarea value using jquery?

I am using ckeditor on textarea but i could not get data from it.

Code :

<textarea name="DSC" class="materialize-textarea"></textarea>
<script>
  CKEDITOR.replace('DSC');
  </script>

Jquery :

var title = $('input[name=TITLE]').val();
    var desc = $('textarea[name=DSC]').text();
    var formdata = 'TITLE='+title+'&DSC='+desc;
javascriptjqueryhtml


Solution 1:[1]

No need for jQuery CKEditor has its own method to get data from converted textarea:

var desc = CKEDITOR.instances['DSC'].getData();

OR:

var desc = CKEDITOR.instances.DSC.getData();

Solution 2:[2]

Use id attibute in textarea and use that id in CKeditor instead of textarea's name check bellow

<textarea name="textareaname" id="textarea-id"></textarea>
CKEDITOR.replace( 'textarea-id');//use id not name//
var ckValue = CKEDITOR.instances["textarea-id"].getData(); or
var ckValue = CKEDITOR.instances.textarea-id.getData();

Solution 3:[3]

alert(CKEDITOR.instances.DSC.getData());

Solution 4:[4]

Using the jQuery_Adapter you may write:

$(function () {
  $('textarea[name="DSC"]').ckeditor();
  $('#btn').on('click', function(e) {
    console.log('ckeditor content: ' + $('textarea[name="DSC"]').val());
  })
});

Include files:

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.9/adapters/jquery.js"></script>

HTML: 

<textarea name="DSC" class="materialize-textarea"></textarea>
<button id="btn">Get text</button>

Solution 5:[5]

Past Text area id below.

 CKEDITOR.instances['Text_Area_Id_Here'].getData();

For example, i have text area

     <textarea class="form-control" id="Description" name="description" width="100%" height="150" ckeditor="true" maxlength="20000" ismandatory="false">
                                                
                    </textarea>

I got value of text area like this

 var description = CKEDITOR.instances['Description'].getData();

Solution 6:[6]

<form>
        <textarea name="editor1" id="editor1" rows="10" cols="80">
            This is my textarea to be replaced with CKEditor.
        </textarea>
    <button type="button" id="getDataBtn">Get Data</button>

    </form>
     <script>
            // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
         CKEDITOR.replace( 'editor1' );

           $(document).ready(function(){

                $("#getDataBtn").click(function(){
                    var editorData= CKEDITOR.instances['editor1'].getData();
                    alert(" your data is :"+editorData);
                })

           });
        </script>

Solution 7:[7]

//getting data form ckeditor in textarea.

var NodeDataSessionTextarea = {};
jQuery('.class-textarea').each(function(index, el) {
    var editor_id = jQuery(this).attr('id');
    var elevalue = jQuery(this).val();

    // Getting ckeditor instance.
    var editor = CKEDITOR.instances[editor_id];
    if (editor) {
        editor.on('key', function(e) {
        var self = this;
            setTimeout(function() {
                //store data in object with id
                NodeDataSessionTextarea[editor_id] = self.getData();
            }, 10);
        });

        editor.on('afterCommandExec', function(e) {
            var self = this;
            setTimeout(function() {
                //store data in object with id
                NodeDataSessionTextarea[editor_id] = self.getData();
          }, 10);
        });

        editor.on( 'blur', function() {
            //store data in session
            var nodedataencodetextarea = JSON.stringify(NodeDataSessionTextarea);
            sessionStorage.setItem("NodeDataSessionTextarea", nodedataencodetextarea);
        });
    }
});



//put data in ckeditor.
var editor = CKEDITOR.instances[id];
if (editor) {
    editor.setData(getTemplateData);
}

Solution 8:[8]

For an update of Bogdan Kuštan's answer using CKEditor 5 (tested in may 2022):

editor.getData() is the new way of getting the Data from the editor.

Here is one common example of using it: filling an hidden field on submitting the form.

import ClassicEditor from '.../src/ckeditor.js';

ClassicEditor
     .create('#editor-container')
     .then(editor => {
          persistForm(editor);
     };
    
function persistForm(editor)
{  
     document.querySelector('form').addEventListener('submit', (e) => {
          document.querySelector('.hidden-input').value = editor.getData();
     });
}

This post is also a reminder for myself later.

Solution 9:[9]

You should use getData() method to get data from CKEDITOR.

<textarea name="DSC" class="materialize-textarea" id="DSC"></textarea>
<script>
  CKEDITOR.replace('DSC');
  </script>

//reference the id DSC
var desc = CKEDITOR.instances['DSC'].getData();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrea
Solution 2 Palash
Solution 3 Muhammad Awais
Solution 4
Solution 5 Tayyeb
Solution 6 Rahul Baruri
Solution 7
Solution 8
Solution 9 ramazan polat

Related Questions