TipTap/VueJS -如何检测按键

Question

我有一个协作聊天应用程序，它使用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，顺便说一下。

感谢

Answer 1

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

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

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

Answer 2

作为参考，我设法做了类似的事情。我使用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

Answer 3

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

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