TipTap 编辑器中无法正确识别空格

Question

我们在项目中使用TipTap的富文本编辑器。
但我们有一个问题，空间无法正确识别，只有在每两次单击后才会创建一个空间。我们使用 Vue.JS 作为框架。

import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
  HardBreak,
  Heading,
  OrderedList,
  BulletList,
  ListItem,
  Bold,
  Italic,
  History
} from 'tiptap-extensions'
import EditorMenuButton from './EditorMenuButton.vue'
export default {
  name: 'editor',
  components: {
    EditorMenuButton,
    EditorMenuBar,
    EditorContent
  },
  props: {
    value: {
      type: null,
      default: ' '
    }
  },
  data () {
    return {
      innerValue: ' ',
      editor: new Editor({
        extensions: [
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new BulletList(),
          new OrderedList(),
          new ListItem(),
          new Bold(),
          new Italic(),
          new History()
        ],
        content: `${this.innerValue}`,
        onUpdate: ({ getHTML }) => {
          this.innerValue = getHTML()
        }
      })
    }
  },
  watch: {
    // Handles internal model changes.
    innerValue (newVal) {
      this.$emit('input', newVal)
    },
    // Handles external model changes.
    value (newVal) {
      this.innerValue = newVal
      this.editor.setContent(this.innerValue)
    }
  },
  mounted () {
    if (this.value) {
      this.innerValue = this.value
      this.editor.setContent(this.innerValue)
    }
  },
  beforeDestroy () {
    this.editor.destroy()
  }
}
</script>

有谁知道只假设每两个空格的原因是什么？

Answer 1

您提供的代码似乎工作得很好。因此，问题很可能是由代码或某些依赖项中的副作用产生的。

event.keyCode === 32要调试此问题，您可以查找事件侦听器，尤其是有关按键或按键事件的事件侦听器，并查看您是否在特定位置（或）检查空格键event.key === " "。结合event.preventDefault此可以解释这样的问题。

另一种更广泛的调试方法是从代码中删除某些部分，直到错误消失，或者添加到最小的示例中，直到错误出现。