javascript – simple way to add onchange event to ckeditor?-ThrowExceptions

Exception or error:

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>
How to solve:

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

###

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]

###

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

###

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.

Leave a Reply

Your email address will not be published. Required fields are marked *