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

当我尝试用我的印迹做某事时，只处理了点击事件，而不是keydown事件。

您可以看到代码示例here。打开控制台，单击 sometext ，您将在控制台中看到“已点击”。但是，如果您尝试按某些键盘按钮，例如箭头，你什么都看不到。

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

Answer 1

处理键盘事件的正确方法是使用Keyboard Module

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

Quill：如何在自定义印迹上处理键盘事件

1 个答案: