Блог

Я хотел бы использовать Ckeditor в своем проекте Laravel/Inertion, но я не могу заставить его работать. Я нашел учебник от LaraTips, но он был написан для VueJS-2. Я работаю с последней версией, которая использует VueJS-3.

Я хочу использовать Ckeditor в отдельном компоненте, и он (вроде) работает, но я не могу отобразить старые данные в редакторе. Я получаю ошибку «Не пойман (в обещании) Ошибка типа: Не удается прочитать свойство ‘setData’ неопределенного значения в 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>
 

Есть какие-нибудь предложения??

Я делаю то же самое учебное пособие (я использую 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);
    },
});
 

В компонентах/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>
 

дай мне знать, сработало ли это для тебя