I have a collaborative chat application that uses tiptap<\/a> for it's messaging area. 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
For reference, I managed to do something similar. I use VueJS native keydown event to detect which key is pressed.
<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
editorProps: {
handleDOMEvents: {
keypress: (view, event) => {
if (event.key === 'Enter') {
console.log('Heyyyy')
}
},
},
},
You can pass it as props to new Editor()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.