TipTap/VueJS - 如何检测按键答案

【问题标题】：TipTap/VueJS - How to detect a keypressTipTap/VueJS - 如何检测按键
【发布时间】：2021-08-17 08:33:58
【问题描述】：

我有一个协作聊天应用程序，它使用tiptap 作为它的消息传递区域。我发现它很有用，因为它已经可以支持多种格式并且可以增加一些灵活性。但是，我在寻找一个监听“enter”键的事件监听器时发现自己卡住了。当用户回车时，我想提交他们的聊天并清除编辑器。

我找到了这个 onUpdate 事件监听器，但我找不到它检测到按下什么键的确切位置。

示例代码如下：

mounted() {
  let editor = new Editor({
    extensions: [StarterKit],
    content: this.value
  });

  editor.on("update", e => {
    console.log(e);
    this.$emit("input", this.editor.getHTML());
  });

  this.editor = editor;
}

顺便说一句，我正在使用 Vue2。

谢谢

【问题讨论】：

标签： vue.js tiptap prose-mirror

【解决方案1】：

在编辑器道具中，传入一个回调

      handleDOMEvents: { 
        keydown: (view, event) => {
          if (event.key === "Enter") {
          }
          return false;
        }
      },

https://www.tiptap.dev/api/editor/#editor-props https://prosemirror.net/docs/ref/#view.EditorProps

【讨论】：

【解决方案2】：

  editorProps: {
    handleDOMEvents: {
      keypress: (view, event) => {
        if (event.key === 'Enter') {
          console.log('Heyyyy')
        }
      },
    },
  },

你可以把它作为 props 传递给 new Editor()

【讨论】：

【解决方案3】：

作为参考，我设法做了类似的事情。我使用 VueJS 原生 keydown 事件来检测按下了哪个键。

<EditorContent class="editor" :editor="editor" @keydown.native="onKeydown" />

methods: {
  onKeydown(e) {
    if (!e.shiftKey && e.which == 13) {
      this.editor.commands.undo(); // i just "undo" the enter event to remove the space it made
      this.$emit("onEnter");
    }
  }
}

参考： https://www.tiptap.dev/installation/vue2#5-use-v-model-optional

【讨论】：