Vue 3 中带有 Vite 的我的 TinyMCE 编辑器组件在 Edit.vue 中首次加载时未加载内容数据？

Question

我有一个带有 Vite 的 Vue 3 项目，我正在使用带有 TinyMCE 的 Editor.vue 组件。我的Editor.vue代码如下： 我的 Editor.vue 代码：

<template>
    <div class="mb-6">
        <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" :for="id">
            {{ label }} <span class="text-red-600" v-if="isRequired">*</span>
        </label>
        <Editor ref="editorRef" :id="id" :value="modelValue" :api-key="apiKey"
            @change="$emit('update:modelValue', $event.level.content)" :init="{ ...editorInit, setup: setupEditor }" />
        <ValidationMessage :validation="validation" :field="id" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import Editor from '@tinymce/tinymce-vue'
import ValidationMessage from '@/components/ValidationMessage.vue'

const apiKey = import.meta.env.VUE_APP_TINYMCE_API_KEY

const props = defineProps({
    isRequired: {
        type: Boolean,
        required: true
    },
    label: {
        type: String,
        required: true
    },
    id: {
        type: String,
        required: true
    },
    modelValue: {
        type: String,
        required: true,
        default: ''
    },
    validation: {
        type: Object,
        default: null,
    },
    editorInit: {
        type: Object,
        default: () => ({
            height: 500,
            selector: 'textarea',
            menubar: true,
            plugins: 'link image code lists',
            toolbar: 'undo redo | styleselect | forecolor | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent numlist bullist | link image | code',
        }),
    },
})

const editorRef = ref(null)

const setupEditor = (editor) => {
    editor.on('init', () => {
        editor.setContent(props.modelValue)
    })
}

defineEmits(['update:modelValue'])
</script>

Editor.vue 组件在我的父组件 Create.vue 中工作正常。描述字段已成功保存到数据库中。以下是我在 Create.vue 父级中使用 Editor.vue 的方法：

<Editor isRequired label="Deskripsi" id="description" v-model="course.fields.description" :validation="validation" />

问题是当我想编辑数据时，描述的内容没有直接加载到编辑器中。我需要刷新页面来加载数据。如何解决此问题，以便我的 Edit.vue 组件可以在首页加载时加载编辑器内容？

Answer 1

我遇到了同样的问题，并能够通过将 @tinymce/tinymce-vue 更新到版本 5.1.1 来解决它