在Laravel/Inertia(Vue3)项目组件中使用CKEditor旧数据不显示报错

问题根源 #

报错是因为你给modelValue的监听器加了immediate: true配置，组件挂载时会立刻把父组件传入的初始值赋值给text，但此时CKEditor实例还没有完成初始化，编辑器内部调用setData方法时找不到对应实例，就抛出了这个错误。

解决步骤 #

1. 先确认你安装的是适配Vue3的CKEditor组件包，执行安装命令：
   npm install @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

2. 调整组件代码，新增编辑器就绪状态判断，等初始化完成后再赋值初始值，修改后的完整代码如下：

<template>
    <ckeditor 
        :editor="editor" 
        v-model="text" 
        :config="editorConfig"
        @ready="onEditorReady"
    ></ckeditor>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
    data() {
        return {
            text: "",
            editor: ClassicEditor,
            editorConfig: {
                // 可自定义编辑器配置
            },
            // 标记编辑器是否完成初始化
            editorReady: false
        }
    },
    props: {
        modelValue: {
            type: String,
            default: ''
        }
    },
    watch: {
        modelValue(newVal) {
            // 仅编辑器初始化完成后才同步外部更新的内容
            if (this.editorReady) {
                this.text = newVal;
            }
        },
        text(newVal) {
            this.$emit('update:modelValue', newVal);
        }
    },
    methods: {
        onEditorReady() {
            this.editorReady = true;
            // 初始化完成后再赋值初始内容
            this.text = this.modelValue;
        }
    }
}
</script>

3. 父组件直接按普通表单组件的用法绑定v-model即可：
   <Ckeditor v-model="你的内容变量" />

内容的提问来源于stack exchange，提问作者Erwin Van Maasakkers