[英]TipTap/VueJS - How to detect a keypress
I have a collaborative chat application that uses tiptap<\/a> for it's messaging area.我有一个协作聊天应用程序,它使用
tiptap<\/a>作为它的消息传递区域。 I found it useful as it can support multiple formats already and can add some flexibility.
我发现它很有用,因为它已经可以支持多种格式并且可以增加一些灵活性。 However, I found myself stuck when looking for an event listener that listens for "enter" key.
但是,在寻找侦听“输入”键的事件侦听器时,我发现自己卡住了。 When the user hit the enter, I want to submit their chat and clear the editor.
当用户按回车键时,我想提交他们的聊天并清除编辑器。
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;
}
In the editor props, pass in a callback在编辑器道具中,传入一个回调
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 https://www.tiptap.dev/api/editor/#editor-props https://prosemirror.net/docs/ref/#view.EditorProps
For reference, I managed to do something similar.作为参考,我设法做了类似的事情。 I use VueJS native keydown event to detect which key is pressed.
我使用 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");
}
}
}
Reference:https://www.tiptap.dev/installation/vue2#5-use-v-model-optional参考:https ://www.tiptap.dev/installation/vue2#5-use-v-model-optional
editorProps: {
handleDOMEvents: {
keypress: (view, event) => {
if (event.key === 'Enter') {
console.log('Heyyyy')
}
},
},
},
You can pass it as props to new Editor()您可以将其作为道具传递给 new Editor()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.