zakdances zakdances - 3 years ago 277
CoffeeScript Question

How can I trigger keyboard events in CodeMirror?

I'm using a different textfield as a proxy for CodeMirror. I want to use features such as

which are activated via keyboard events such as
, and
. I've tried several different approaches to trigger these events, none of which have caused CodeMirror to receive anything:

kc = 219
e = $.Event 'keydown', { which: kc }
$( myCodeMirror.getInputField() ).trigger e

Doesn't work. No events are fired.

cmIF = $( myCodeMirror.getInputField() )

textArea = $('<textarea></textArea>')
$('body').append textArea
textArea.keydown (e) ->

kc = 219
e = $.Event 'keydown', { which: kc }
textArea.trigger e

Trying to forward events from a different text area. Doesn't work. CM doesn't events don't get triggered.

$( myCodeMirror.getWrapperElement() ).children().each (index) ->
$(this).trigger e

Trying to trigger the event on every child of CMs wrapper. Doesn't work. No CM events fired.

What am I doing wrong here? How can I trigger keyboard events on a CodeMirror instance?

Answer Source

I am not sure if I understand you 100% but currently I define keyboard events when I am defining my configuration options for the codemirror instance.

var cmInstance = CodeMirror(target, {
    value: myTextArea.value,
    //other options here perhaps

    //defining some keyboard shortcuts
    extraKeys: {
        "Ctrl-J": "toMatchingTag",
        "Ctrl-S": function(cm) {
            saveCode(cm); //function called when 'ctrl+s' is used when instance is in focus
        "F11": function(cm) {
            toggleFullscreen(cm,true); //function called for full screen mode 
        "Esc": function(cm) {
            toggleFullscreen(cm,false); //function to escape full screen mode

Keep in mind these functions will only fire when the codemirror instance is in focus. Then you can do whatever you like in your functions perhaps even add new listeners to see what sort of event occurred(?).

I hope this helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download