时间戳

首页 > 解决方案 > TipTap/VueJS - 如何检测按键

vue.js - TipTap/VueJS - 如何检测按键

问题描述

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

我找到了这个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.jstiptapprose-mirror

解决方案

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

      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

推荐阅读