Quill:如何在自定义blot上处理键盘事件

Question

我已经创建了自定义内联印迹，并希望处理键盘事件在它上。

在constructor中，我编写了如下代码：

class FooBlot extends Inline {
  constructor(domNode, value){
    super(domNode, value);
    domNode.addEventListener('keydown', (event) => {this.keydown_handler(event)});
    domNode.addEventListener('click', (event) => {this.click_handler(event)});
  };

当我试图用我的印迹做一些事情时，只有单击事件被处理，而不是按键事件。

您可以看到代码示例这里。打开控制台，单击，您将在控制台中看到“单击”。但是，如果你试图按一些键盘按钮，例如箭头，你就什么都看不到了。

在我的自定义污点上处理键盘事件的正确方法是什么？

Answer 1

处理键盘事件的正确方法是使用键盘模块

处理Enter密钥的简单示例：

const bindings = {
  enter: {
    key: 13,
    shiftKey: null,
    handler: (range, context) => {
      // Handle enter
    }
  }
};

this.quill = new Quill('#editor-container', {
  modules: {
    keyboard: {
      bindings
    },
    toolbar: '#toolbar'
  },
  theme: 'snow'
});

更新

另一种方式是：

quill.root.addEventListener('keydown', evt => { // Your code goes here });