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

【问题标题】：Spaces are not recognized correctly in the TipTap EditorTipTap 编辑器中无法正确识别空格
【发布时间】：2020-08-28 08:01:08
【问题描述】：

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

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

【问题讨论】：

在没有minimal reproducible example（实际上再现行为）的情况下获得有用答案的机会接近null。使用 codesandbox.io 或任何其他基于在线多文件节点的编辑器。您在此处显示的内容不会重现所描述的行为并且缺少：EditorMenuButton.vue 的模板和内容（很可能是您的错误来自哪里）。
Here's a sandbox 与您到目前为止所展示的内容。如您所见，它按预期工作。因此，请向其中添加错误，以便有人可以调试它。 :) 注意：我确实做了一些更改，因为您无法在data 中初始化编辑器。在mounted 中执行此操作，如他们的示例中所示。 Here's why.
谢谢我们会尝试在代码沙箱中编程
@tao 在data 中初始化编辑器正是examples 中的写法。
@Erich，与链接示例的显着区别在于它没有在data 中使用this。因为它不可用。这就是为什么我建议将其移至mounted。

标签： javascript html vue.js frontend tiptap

【解决方案1】：

我们遇到了同样的问题，我们保留了 onUpdate 触发器，但更改了手表，使其仅在值实际不同时才调用 editor.setContent。

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

【讨论】：

【解决方案2】：

对我来说，这个错误是由执行以下操作引起的：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

删除 onUpdate 部分，该错误将消失。我不知道为什么，但是知道如何重现这个错误很有趣。但是，如果您创建“最小可复制示例”，则不会出现该错误。所以呢？我不知道。

我找到了使用 vuex 的解决方法。

我没有将 getHTML() 返回的值赋给 innerValue 变量，然后发出 'input' 事件，而是将此值放入存储中。

【讨论】：