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

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

从'tiptap'导入{Editor，EditorContent，EditorMenuBar}
进口{
硬突破，
标题
订单列表，
项目清单，
列表项，
大胆的
斜体，
历史
}从“tiptap extensions”
从“./editoremunbutton.vue”导入editoremunbutton
导出默认值{
姓名：'编辑'，
组成部分：{
编辑按钮，
编辑，
编辑内容
},
道具：{
价值：{
类型：null，
默认值：“”
}
},
数据（）{
返回{
内部值：“”，
编辑：新编辑({
扩展：[
新硬中断（），
新标题（{级别：[1,2,3]}），
新公告列表（），
新建OrderedList（），
新建ListItem（），
新加粗（），
新斜体（），
新历史（）
],
内容：`${this.innerValue}`，
onUpdate:（{getHTML}）=>{
this.innerValue=getHTML（）
}
})
}
},
观察：{
//处理内部模型更改。
内部值（newVal）{
此.$emit（'input'，newVal）
},
//处理外部模型更改。
值（newVal）{
this.innerValue=newVal
this.editor.setContent（this.innerValue）
}
},
挂载（）{
if（该值）{
this.innerValue=this.value
this.editor.setContent（this.innerValue）
}
},
在销毁之前（）{
this.editor.destroy（）
}
}

---

有人知道为什么只假设每两个空间

您提供的代码似乎工作正常。因此，问题很可能是由代码中的副作用或某些依赖项引起的

要调试此问题，您可以查找事件侦听器，特别是有关按键或按键按下事件的侦听器，并查看是否在某个特定位置检查空格键（

event.keyCode===32

或

event.key===”

）。结合

event.preventDefault

这可以解释这样的问题

---

另一种更广泛的调试方法是从代码中剥离部分，直到bug消失，或者添加到一个最小的示例中，直到bug出现

删除更新部分，错误将消失。我不知道为什么，但知道如何复制这个bug很有趣。 但是，如果创建“最小可复制示例”，则不会出现错误。 那又怎么样？我不知道

我找到了一个解决办法，就是使用vuex

---

我没有在innerValue变量中分配getHTML（）返回的值，然后发出“input”事件，而是将此值放入存储中。

我的此错误是由以下操作引起的：

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

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

---

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

这确实有帮助。根据这个建议，我目前正在使用

onBlur

事件而不是

onUpdate

，同时使用编辑器实例和

getHTML（）

函数获取内容的HTML，例如：

this.editor.getHTML（）

---

（在我的例子中，I

$emit

此值是为了使其对我的父组件起反应，但这可能与原始问题无关）。

我们遇到了相同的问题，我们保留了

onUpdate

触发器，但更改了手表，使其仅在值实际不同时调用

editor.setContent

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

---

您获得有用的答案而不使用密码（实际复制行为）的机会接近

null

。使用codesandbox.io或任何其他基于多文件节点的在线编辑器。您在此处显示的内容没有重现所描述的行为，并且缺少：

editormenubton.vue的模板和内容（最有可能是您的bug的来源）。用你到目前为止所展示的。正如你所看到的，它正在按预期工作。因此，请将错误添加到其中，以便有人可以调试它。：）注意：我做了一些更改，因为您无法在
数据中初始化编辑器。在安装的
中执行此操作，如他们的示例所示。谢谢，我们将尝试在代码中对其进行编程sandbox@tao在
data
中初始化编辑器正是它在中的编写方式。@Erich，与链接示例中的显著区别是，它没有在
数据中使用
这个
。因为它不可用。这就是为什么我建议将其移动到
挂载的
。