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

Question

我们在项目中使用TipTap的富文本编辑器。

但我们有一个问题，空格不能被正确识别，只有在每点击2次之后才会创建一个空格。作为框架，我们使用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

我们有相同的问题，我们保留了onUpdate触发器，但更改了监视，以便它只在值实际不同时调用editor.setContent。

  watch: {
    value() {
      let html = this.editor.getHTML();
      if (html !== this.value) {
        this.editor.setContent(this.value);
      }
    },
  },

Answer 2

对我来说，这个bug是由这样的事情引起的：

  watch: {
    value: {
      immediate: true,
      handler(newValue) {
        this.editor.setContent(newValue)
      },
    },
  },

完全删除了它，bug也就消失了。也许这会在未来对某些人有所帮助。

Answer 3

删除onUpdate部分，错误就会消失。我不知道为什么，但知道如何重现bug是一件很有趣的事情。

这确实有帮助。按照这个建议，我目前使用的是onBlur事件而不是onUpdate，同时使用编辑器实例和getHTML()函数来获取内容的超文本标记语言，例如：this.editor.getHTML()。

(在我的例子中，我$emit这个值是为了让它对我的父组件起反应，但这可能与原始问题无关)。