KeyDown event for CKeditor

▲
2
▼

In my application I have an instance of a CKEditor. While the user is entering text into the editor the first latter should be in uppercase. For that I wrote a jQuery keydown event handler, like this:

$(document).ready(function () {
    CKEDITOR.instances.CKEditor1.on('contentDom', function () {
        CKEDITOR.instances.CKEditor1.document.on('keydown', function (event) {
            if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey) && !(event.ctrlKey) && !(event.metaKey) && !(event.altKey)) {
                var $t = $(this);
                event.preventDefault();
                var char = String.fromCharCode(event.keyCode);
                $t.val(char + $t.val().slice(this.selectionEnd));
                this.setSelectionRange(1, 1);
            }
        });
    });
});

It gives an runtime error i.e,

0x800a138f - JavaScript runtime error: Unable to get property 'on' of undefined or null reference

How can I create keydown event for ckeditor.(the above code I wrote in .aspx page)

javascript
c#
jquery
asp.net
ckeditor
asked on Stack Overflow May 12, 2016 by (unknown user) • edited May 12, 2016 by Rory McCrossan

2 Answers

▲
1
▼

You can achieve this with the following code.

 CKEDITOR.replace( 'editor1', {
        on: {
            instanceReady: function() {
                alert( this.name ); // 'editor1'
            },

            key: function() {
                setTimeout(function(){
                    console.log('key pressed');
                },1);
            }
        }
    });

Without the setTimeout function the editor cannot capture the last key pressed.

CKEditor version 4.x

answered on Stack Overflow Apr 18, 2018 by Jamal Abdul Nasir • edited Apr 18, 2018 by Jamal Abdul Nasir
▲
0
▼

I believe you're registering the contentDom event the wrong way. To instantiate CKEDITOR and register the contentDom event you'd do

   CKEDITOR.replace( 'editor1', {
    on: {
        instanceReady: function() {
            alert( this.name ); // 'editor1'
            var editor = this;
            editor.on( 'contentDom', function() {
              var editable = editor.editable();
              editable.attachListener( editable, 'click', function() {
                console.log( 'The editable was clicked.' );
              });
           });
        }
    }
} );

Your code is trying to access the CKEDITOR instance before it has finished instantiating. More information can be found at http://docs.ckeditor.com/#!/api/CKEDITOR.config and http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-contentDom

answered on Stack Overflow Dec 19, 2016 by Grasshopper

User contributions licensed under CC BY-SA 3.0