测验：如何处理自定义污点上的键盘事件

Question

I've created custom inline-blot and want to handle keyboard events on it.

In constructor i wrote code like this:

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

When i try to do something with my blot, only click event was handled, not keydown event.

You can see code example here . Open console, click on sometext and you will see "clicked" in console. But if you try to press some keyboard buttons, eg arrows, you will not see anything.

What the right way to handle keyboard events on my custom blot?

Answer 1

The right way to handle keyboard events is to use Keyboard Module

Simple example to handle Enter key:

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

UPDATE

Another way:

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