如何在CodeMirror中触发键盘事件?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在CodeMirror中触发键盘事件?相关的知识,希望对你有一定的参考价值。

我使用不同的文本字段作为CodeMirror的代理。我想使用closebrackets.js等功能,这些功能通过键盘事件激活,如keydownkeypresskeyup。我尝试了几种不同的方法来触发这些事件,但没有一种方法导致CodeMirror接收任何东西:

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

不行。没有事件被触发。

cmIF = $( myCodeMirror.getInputField() )

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

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

尝试转发来自不同文本区域的事件。不行。 CM不会触发事件。

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

试图在CMs包装器的每个子节点上触发事件。不行。没有发生CM事件。

我在这做错了什么?如何在CodeMirror实例上触发键盘事件?

答案

我不确定我是否100%理解你,但是当我定义codemirror实例的配置选项时,我目前定义了键盘事件。

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
        }
    }
});

请记住,这些函数仅在codemirror实例处于焦点时触发。然后你可以在你的函数中做任何你喜欢的事情,甚至可以添加新的监听器来查看发生了什么类型的事件(?)。

我希望这有帮助。

另一答案

我也有同样的痛苦,最后我找到了解决方案。我不知道这是丑陋与否,但它对我有用。希望它对你有用。

myCodeMirror.options.extraKeys.F11(); //trigger F11 assigned function
myCodeMirror.options.extraKeys.["Ctrl-S"](); //trigger Ctrl-S assigned function
另一答案

codemirror带有一个未记录的函数triggerOnKeyDown,您可以使用该函数触发codemirror上的键:

const ev = {
  type: 'keydown',
  keyCode: 40 // the keycode for the down arrow key, use any keycode here
}
cm.triggerOnKeyDown(ev)

以上是关于如何在CodeMirror中触发键盘事件?的主要内容,如果未能解决你的问题,请参考以下文章

vue中触发键盘事件的两种方法和如何自定义键位事件,完整代码!

在线代码编辑器---codemirror插件

为啥 Ionic 键盘事件不触发?

Android 键盘事件触发以及监听

如何确定移动浏览器中的软键盘是不是触发了调整大小事件?

选择选项卡片段时触发啥事件