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

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

<label for="CampaignTitle">Title</label>
<input name="data[Campaign][title]" type="text" id="CampaignTitle" />

and

<div id="titleBar" style="max-width:960px; max-height:76px;"></div>

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

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.

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');

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

<textarea id="CampaignTitle"></textarea>

Hope it helps.

var campaignTitle= CKEDITOR.instances['CampaignTitle'].getData();

Simply execute

CKEDITOR.instances[elementId].getData();

with element id = id of element assigned the editor.

i found following code working for ckeditor 5

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        editor.model.document.on( 'change:data', () => {
            editorData = editor.getData();
        } );
    } )
    .catch( error => {
        console.error( error );
    } );