javascript 如何在Vue 3脚本设置中将TipTap绑定到父v-model?

92dk7w1h  于 2023-05-05  发布在  Java
关注(0)|答案(2)|浏览(115)

我尝试使用tiptap作为子组件,并将其内容传递给父组件的v-model,但tiptap的documentation似乎只提供了如何在没有script setup的情况下完成此操作的信息,script setup使用不同的API。
这是我的parent组件:

<template>
    <cms-custom-editor v-model:modelValue="state.content"/>
    <p>{{state.content}}</p>
</template>

<script setup>
import CmsCustomEditor from '../../components/backend/cms-custom-editor.vue'
import {reactive} from "vue";

const state = reactive({
    content: '<p>A Vue.js wrapper component for tiptap to use <code>v-model</code>.</p>',
})

</script>

这是child分量和tiptap

<template>
  <div id="cms-custom-editor" class="cms-custom-editor">
    <editor-content :editor="editor"/>
  </div>
</template>

<script setup>
import {useEditor, EditorContent} from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['update:modelValue'])

const editor = useEditor({
    extensions: [StarterKit],
    content: props.modelValue,
    onUpdate: () => {
        emit('update:modelValue', editor.getHTML())
    }
})
</script>

只要我在编辑器字段中键入一些内容,下面的代码行就会失败:

emit('update:modelValue', editor.getHTML())

并抛出此错误:

Uncaught TypeError: editor.getHTML is not a function
    at Editor2.onUpdate (cms-custom-editor.vue?t=1654253729389:28:42)
    at chunk-RCTGLYYN.js?v=89d16c61:11965:48
    at Array.forEach (<anonymous>)
    at Editor2.emit (chunk-RCTGLYYN.js?v=89d16c61:11965:17)
    at Editor2.dispatchTransaction (chunk-RCTGLYYN.js?v=89d16c61:12252:10)
    at EditorView.dispatch (chunk-RCTGLYYN.js?v=89d16c61:9138:27)
    at readDOMChange (chunk-RCTGLYYN.js?v=89d16c61:8813:8)
    at DOMObserver.handleDOMChange (chunk-RCTGLYYN.js?v=89d16c61:8924:77)
    at DOMObserver.flush (chunk-RCTGLYYN.js?v=89d16c61:8575:12)
    at DOMObserver.observer (chunk-RCTGLYYN.js?v=89d16c61:8455:14)

我使用了文档中的方法(第5章)。v-model),就像我说的,它不是为script setup设计的。

ryhaxcpt

ryhaxcpt1#

伙计,这些文件真让人困惑。他们混淆了标准的composition apiscript setup。不管怎样,它是这样工作的:

const editor = useEditor({
    extensions: [StarterKit],
    content: props.modelValue,
    onUpdate: ({editor}) => {
        emit('update:modelValue', editor.getHTML())
    }
})
oewdyzsn

oewdyzsn2#

你可以试试这个

<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import { onBeforeUnmount, watchEffect } from 'vue';

const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
});

const emits = defineEmits(['update:modelValue'])

watchEffect(() => props.modelValue, (newValue, oldValue) => {
    const isSame = newValue === oldValue;
    if (isSame) {
        return;
    }

    editor.value?.commands.setContent(newValue, false)
});

const editor = useEditor({
    content: props.modelValue,
    extensions: [
        StarterKit,
    ],
    onUpdate: ({ editor }) => {
        let content = editor.getHTML()
        emits('update:modelValue', content)
    },
});

onBeforeUnmount(() => {
    editor.destroy();
})

</script>

相关问题