未在 Quill Inline 印迹中注册的按键事件

Question

我的 Quill 编辑器中有一个自定义的 Inline Blot。我想在节点上收听 keypress 事件。问题是 keypress 事件永远不会被触发，尽管 click 事件工作得很好。

这是我的代码：

const Inline = Quill.import('blots/inline');

class Editable extends Inline {
  static create(value: any) {
    const node = super.create();
    node.setAttribute('contenteditable', true);
    node.setAttribute('editable', value);
    node.addEventListener('keypress', (e: any) => {
      alert('pressed'); // doesn't work
    });
    node.addEventListener('click', (e: any) => {
      alert('clicked'); // works
    });
    return node;
  }
}

Editable.blotName = 'editable';
Editable.tagName = 'edit';
Quill.register(Editable);

我做错了什么？

更新

经过一些研究，结果是 Keyboard Module

const bindings = {
  enter: {
    key: 13,
    shiftKey: null,
    handler: () => {
      const range = this.quill.getSelection(true);
      if (range && !this.editable(range.index)) {
        this.quill.insertText(range, '\n');
      }
    }
  }
};

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

Answer 1

经过一些研究，结果是 Keyboard Module

const bindings = {
  enter: {
    key: 13,
    shiftKey: null,
    handler: () => {
      const range = this.quill.getSelection(true);
      if (range && !this.editable(range.index)) {
        this.quill.insertText(range, '\n');
      }
    }
  }
};

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

未在 Quill Inline 印迹中注册的按键事件

Keypress events not registered in Quill Inline blot

angular

typescript

quill