时间戳

首页 > 解决方案 > TipTap 编辑器中无法正确识别空格

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

问题描述

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

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

标签： javascripthtmlvue.jsfrontendtiptap

解决方案

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

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

推荐阅读