simple way to add onchange event to ckeditor?

Question

Is there a nice and easy quick way to add an onchange event to the CKeditor.

I would like to do something when ever the text changes? Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="js/ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="js/ckeditor/adapters/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
   $(function () {
        var config = {
            toolbar:
                    [
                        ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList']
                    ],
            width: 600,
            height: 400,
            resize: false
        };

        $('.jquery_ckeditor').ckeditor(config);


        CKEDITOR.instances[0].on('change', function () {
            alert("test");
        });





    });

    //]]>
    </script>
</head>
<body>
    <textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</body>
</html>

It already has a whole API to tap into, including [events](http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html) — j08691, Aug 16 '12 at 19:24
possible duplicate of [Detecting onChange events from a CKEditor using Jquery](http://stackoverflow.com/questions/5143516/detecting-onchange-events-from-a-ckeditor-using-jquery) — AlfonsoML, Aug 16 '12 at 22:06

sergzach · Answer 1 · 2012-08-17T06:03:32.273

0

Edit. Excuse me, my previous version of answer was not correct.

As I have found out it's no a standart onchange event for CKEDITOR. Instead of it you can emulate it with help of another events for textarea. For example, you can use the event 'keydown'.

Try it by changing the code for CKEDITOR to the next one:

CKEDITOR.instances[idOfTextarea].document.on('keydown', function() {alert('text')});

More info

edited Aug 17 '12 at 06:03

answered Aug 16 '12 at 19:33

sergzach

6,578
7
46
84

what does the [0 ] mean - can it to use "jquery_ckeditor" . thanks for the help – Hello-World Aug 16 '12 at 19:35
@Hello-World It means the first (and only) instance of CKEDITOR. – sergzach Aug 16 '12 at 19:36
@Hello-World Try to do it after document is complete. See my changed answer please. Is it OK now? – sergzach Aug 16 '12 at 19:43
i now I get this error - will update my code now at the top - thanks for the help -- Microsoft JScript runtime error: Unable to get value of the property 'on': object is null or undefined – Hello-World Aug 16 '12 at 19:49
@Hello-World I have corrected my answer, please see the newest version. – sergzach Aug 16 '12 at 20:23

Vladimir Tagai · Answer 2 · 2014-07-02T09:19:16.290

0

There is an error in your code:

CKEDITOR.instances[0]

instances is an object, and you can get value (editor) by the key.

Replace it with

CKEDITOR.instances[yourInstanceName]

edited Jul 02 '14 at 09:19

answered Jul 02 '14 at 09:12

Vladimir Tagai

321
1
2
13

score 0 · Answer 3 · answered Dec 13 '19 at 05:40

0

CKEDITOR.instances.editor1.on('change', function() { 
    console.log("TEST");
});

answered Dec 13 '19 at 05:40

Maria Kishore P

1

CKEDITOR.instances..on(--change event--). You can give an instance name for your CKEDITOR like CKEDITOR.replace() – Maria Kishore P Dec 20 '19 at 10:01
@XPD. Sorry for the late reply. – Maria Kishore P Dec 20 '19 at 10:05

score 0 · Answer 4 · answered Feb 11 '20 at 07:36

CKEditor provides various events which is mentioned in their Documentation.

Change Event: Fired when the content of the editor is changed.

Due to performance reasons, it is not verified if the content really changed. The editor instead watches several editing actions that usually result in changes. This event may thus in some cases be fired when no changes happen or may even get fired twice.

If it is important not to get the change event fired too often, you should compare the previous and the current editor content inside the event listener. It is not recommended to do that on every change event.

Please note that the change event is only fired in the wysiwyg mode. In order to implement similar functionality in the source mode, you can listen for example to the key event or the native input event (not supported by Internet Explorer 8).

CKEDITOR.instances.editor1.on('change', function () {
    // operations
});

Here editor1 is the id of the textarea or the instance of the element.

simple way to add onchange event to ckeditor?

4 Answers4