5

我们在项目中使用了 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>

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

4

6 回答 6

2

我们遇到了同样的问题，我们保留了onUpdate触发器但更改了手表，以便它只会editor.setContent在值实际不同时调用。

  watch: {
    value() {
      let html = this.editor.getHTML();
      if (html !== this.value) {
        this.editor.setContent(this.value);
      }
    },
  },
于 2021-01-13T10:41:05.940 回答
0

删除 onUpdate 部分，该错误将消失。我不知道为什么，但是知道如何重现这个错误很有趣。

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

（在我的情况下，我$emit这个值是为了让它对我的父组件产生反应，但这可能与原始问题无关）。

于 2020-08-19T13:40:04.090 回答
0

这个错误对我来说是由做这样的事情引起的：

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

完全删除了这个，错误就消失了。也许这将有助于将来的某人。

于 2020-08-11T16:06:28.883 回答
0

“好吧，问题是当你在编辑器中输入时，观察者会被解雇。所以这将检查编辑器是否有焦点，如果不是这样，只会更新编辑器内容。”

 watch: {
    value(val) {
      if (!this.editor.focused) {
        this.editor.setContent(val, false);
      }
    }
  },

问题：https ://github.com/ueberdosis/tiptap/issues/776#issuecomment-667077233

于 2021-09-24T20:24:13.693 回答
-1

Remove onUpdate section and the bug will disapear. I don't know why, but it's interessing to know how to reproduce the bug. However if you create a "minimal reproductible example" the bug does not appear. So what ? I don't know.

I found a workaround which is to use vuex.

Rather than assign the value returned by getHTML() in the innerValue variable and then issue an 'input' event, I put this value in the store.

于 2020-05-27T17:19:23.943 回答
-1

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

要调试此问题，您可以查找事件侦听器，尤其是关于按键或按键事件，并查看您是否在某处（event.keyCode === 32或event.key === " "）专门检查空格键。结合event.preventDefault这可以解释这样一个问题。

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

于 2020-05-21T11:57:37.287 回答