在具有弹性/惯性的组件中使用CKEditor

Question

我想在我的Laravel/惯性项目中使用Ckeditor，但是我不能让它工作。我在LaraTips上找到了一个教程，但它是为VueJS-2编写的。我正在使用使用VueJS-3的最新版本惯性。

我想在一个单独的组件中使用Ckeditor，它(某种程度上)可以工作，但我无法在编辑器中显示旧数据。我得到了一个错误"Uncaught (in promise) TypeError: Cannot read property 'setData‘of undefined at Proxy.modelValue (app.js:29)“我做错了什么？

这是我的组件：

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

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    export default {
        data() {
            return {
                text: "",
                editor: ClassicEditor,
                editorConfig: {
                    // The configuration of the editor.
                },
            }
        },
        props: {
            modelValue: {}
        },
        
        setup() {
            
        },
        watch: {
            modelValue: {
                immediate: true,
                handler(modelValue) {
                    this.text = modelValue;
                }
            },

            text(text) {
                this.$emit('update:modelValue', text);
            }
        },
    }
</script>

有什么建议吗？

Answer 1

我正在做同样的教程(我正在使用vueJS-3)。

这可能对你有用：

在app.js include CKEditor中：

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use( CKEditor)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

在Components/CkEditor.vue中检查您发出的是什么，查找此this.$emit("input", text);

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

<script>
import ClasicEditor from "@ckeditor/ckeditor5-build-classic";

export default {
    props: {
        value: {},
    },
    data() {
        return {
            text: "",
            editor: ClasicEditor,
            editorConfig: {
                // The configuration of the editor.
            },
        };
    },

    watch: {
        value:{
            inmediate: true,
            handler(value){
                this.text = value;
            }
        },
        text(text) {
            this.$emit("input", text);
        },
    },
};
</script>

如果这对你有效，请告诉我