在带有 Laravel/Inertia 的组件中使用 CKEditor

Posted 2023-03-21

【中文标题】在带有 Laravel/Inertia 的组件中使用 CKEditor

【英文标题】：Using CKEditor in a component with Laravel/Inertia

【发布时间】：2021-10-26 20:38:15

【问题描述】：

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

我想在一个单独的组件中使用 Ckeditor，它（有点）工作，但我无法让旧数据显示在编辑器中。我收到错误“未捕获（承诺）TypeError：无法读取 Proxy.modelValue (app.js:29) 处未定义的属性 'setData'” 我做错了什么？

这是我的组件：

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

有什么建议吗？？

【参考方案1】：

我正在做同样的教程（我正在使用 vueJS-3）。

这可能对你有用：

在 app.js 中包含 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>

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

【讨论】：

嗨，雷耶斯，我还没试过。我找到了另一种方法来处理它，但我会尝试，我会告诉你。只是不会在几天之内。谢谢你的努力！！！我真的很感激。