CODEWITHSUNDEEP
javascriptckeditor
Anonymous Man
Anonymous Man

Reputation: 3056

Calling onChange function supposedly built into ckeditor 4.2+

I have a CKEditor textarea (version 4.3) and a javascript function, requiredCheck() I'd like to call whenever text is entered into it.

Supposedly, this functionality was built into ckeditor as of version 4.2 as part of the 'undo' function, but I can't find any information on how to actually call and use it. Everything I've found by searching is too old to be helpful (painful hacks on older versions before it was built in.)

I believe this is the pertinent section of the documentation, but I'm not skilled enough with ckeditor or javascript to really understand what I'm supposed to do with this:

http://docs.ckeditor.com/#!/api/CKEDITOR.event-method-on

Has anyone done this with the built in function in 4.2+?

This is what I'm trying now based on responses below but it's still not working. Hopefully it's just a syntax problem? 

<textarea name="editor1" id="editor1" rows="20" cols="80" ></textarea>
<script>
    CKEDITOR.replace( 'editor1', {
        filebrowserUploadUrl: "upload.php",
        on: {
            change: function() {
            requiredCheck();
            }
        }
    } );
</script>

Any help would be appreciated. And yes, I've cleared the browser cache, I know ckeditor is sensitive to that.

Upvotes: 0

Views: 1039

Answers (2)

Reinmar
Reinmar

Reputation: 22023

// Create editor instance.
var editor = CKEDITOR.replace( 'editor' );

// Attach event listener to the #change event.
editor.on( 'change', function() {
    doSomethingOnChange();
} );

Or even shorter, with the special option `config.on usage:

CKEDITOR.replace( 'editor', {
    on: {
        change: function() {
            doSomethingOnChange();
        }
    }
} );

Sample: http://jsfiddle.net/N6v8Z/

Upvotes: 4

MMK
MMK

Reputation: 3721

Try using this

   onChange: function (element, callback) {
        var editor = CKEDITOR.dom.element.get(element).getEditor();
        if (editor) {
          editor.on('change', function () {
            alert("Change");
          });
        }
        return !!editor;
      },

Hope this helps.

Upvotes: 0

Related Questions