My TinyMCE Editor component in Vue 3 with Vite not loading content data on first load in Edit.vue?

Question

I have a Vue 3 project with Vite and I am using Editor.vue components with TinyMCE. My Editor.vue code is as follows: My Editor.vue code:

<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>

The Editor.vue component works fine in my parent component Create.vue. The description field is saved successfully to the database. Here is how I use Editor.vue in the Create.vue parent:

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

The problem is that when I want to edit data, the content of description is not loaded directly into the editor. I need to refresh the page to load the data. How can I fix this issue so that my Edit.vue component can load the Editor content on the first page load?

Answer 1

I was experiencing the same issue and was able to resolve it by updating @tinymce/tinymce-vue to version 5.1.1

yarn add @tinymce/tinymce-vue@5.1.1

or

npm i @tinymce/tinymce-vue@5.1.1