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

<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>

score 116 · Accepted Answer · edited Sep 02 '14 at 20:56

116

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>

edited Sep 02 '14 at 20:56

milkovsky

8,772
4
28
32

answered Oct 26 '11 at 18:45

Jere

3,377
1
21
28

Thanks so much for this. Works perfectly. Elephant Juice :) – Didju Juzphart Oct 26 '11 at 22:55
One thing though. On my ckeditor I have the toolbars for bold underline italic and size. If you apply these styles they don't get applied in the corresponding trackingDiv - apart from underline, which strangely works. But size, bold, underline and italic don't work. Any ideas? – Didju Juzphart Oct 26 '11 at 23:06
1

Ckeditor is using strong for bold, em for italics. My guess is that the browser or framework you are using doesn't apply bold and italics styles to those tags. You'll have to do that yourself. http://stackoverflow.com/questions/271743/whats-the-difference-between-b-and-strong-i-and-em – Jere Oct 27 '11 at 00:11
Great. I'd been going around in circles over this. Nightmare. It started after I'd placed two editor instances for two different textarea's. And even more strangely, after I'd posted the content to another HTML page, the info was posted ok. But doing the normal document.getElementById("sss").value thing, dd not reveal the content of the text area. So var editorText = CKEDITOR.instances.sss.getData(); works just great. – Carl Hine Sep 10 '13 at 10:01
CKEDITOR.instances['editor1'].getData() worked for me – Vikram Shetty Sep 09 '15 at 13:44

score 17 · Answer 2 · answered Nov 12 '14 at 16:50

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.

itzmukeshy7 · Answer 3 · 2016-05-14T12:25:16.030

11

Simply execute

CKEDITOR.instances[elementId].getData();

with element id = id of element assigned the editor.

edited May 14 '16 at 12:25

answered Feb 25 '14 at 06:41

itzmukeshy7

2,669
1
21
29

This is the best Solution. – Ahsan May 14 '16 at 11:37
The accepted answer was not worked in my case. it seems pretty cool as it use the main field id as instance id. bravo! It can be used like CKEDITOR.instances.elementId.getData() also. – naf4me Dec 10 '17 at 10:40

score 4 · Answer 4 · answered Jan 12 '13 at 16:17

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

score 2 · Answer 5 · edited Oct 29 '19 at 16:13

2

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

edited Oct 29 '19 at 16:13

Antoine Delia

1,728
5
26
42

answered Oct 29 '19 at 15:21

harshit mishra

43
1
7

score 0 · Answer 6 · answered Oct 26 '11 at 17:02

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.

Saeed Zam · Answer 7 · 2014-04-21T13:08:53.060

-1

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

edited Apr 21 '14 at 13:08

answered Apr 20 '14 at 12:28

Saeed Zam

11
1

2

Why the click event on `document`? – Marcel Gwerder Apr 20 '14 at 12:50
Please explain why this is an answer to the question, or expect this answer to be deleted. – david.pfx Apr 20 '14 at 14:58
@Marcel Gwerder : document can be removed it doesn't make any change. – Saeed Zam Apr 21 '14 at 05:11
@david.pfx : because the ckeditor field contents will be saved in value id with each click and it will be ready for sending via post or get method. you can be sure it's the best way for it. I've tested that – Saeed Zam Apr 21 '14 at 05:14
@Marcel Gwerder : because the ckeditor field contents will be saved in value id with each click and it will be ready for sending via post or get method. you can be sure it's the best way for it. I've tested that – Saeed Zam Apr 21 '14 at 05:18
The aim of SO is to provide high quality questions and answers for the benefit of the community. You should edit your answer to include additional explanation for the benefit of all readers. Answers as short as this are subject to review and at risk of down-voting or deletion, even if correct. – david.pfx Apr 21 '14 at 05:46

score -1 · Answer 8 · answered Oct 17 '16 at 06:37

-1

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

answered Oct 17 '16 at 06:37

Isuru

530
3
9
25

1

This code may answer the question, but could you explain it a bit more? – Roman Oct 17 '16 at 08:36
No need for an answer. This had an accepted answer 5 years ago. Additionally, you've not explained any of your code. – Novocaine Oct 17 '16 at 09:33

Getting the textarea value of a ckeditor textarea with javascript

8 Answers8

Linked

Related