Question

126

Getting the textarea value of a ckeditor textarea with javascript

rated 0 times [ 133] [ 7] / answers: 1 / hits: 146906 / 13 Years ago, wed, october 26, 2011, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ronans

Add To Favorites

Follow

Total Points: 460

Total Questions: 109

Total Answers: 108

Location: Slovenia

Member since Sat, Sep 11, 2021

3 Years ago

answered 13 Years ago monetm · Accepted 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:

<textarea id=editor1 name=editor1>This is sample text</textarea>



<div id=trackingDiv ></div>



<script type=text/javascript>

    CKEDITOR.replace( 'editor1' );



    timer = setInterval(updateDiv,100);

    function updateDiv(){

        var editorText = CKEDITOR.instances.editor1.getData();

        $('#trackingDiv').html(editorText);

    }

</script>