Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Erwin_nl's avatar

Can't get a Ckeditor component to work in Laravel/Inertia

I'd like to use Ckeditor in my Laravel/Inertia project and i can't get it to work. I found a tutorial from LaraTips, but that was written for VueJS-2. I am working with the lastest version Inertia which uses VueJS-3.

I want to use Ckeditor in a separate component, and it (sort of) works, but i can't get the old data to show in the editor. I get an error "Uncaught (in promise) TypeError: Cannot read property 'setData' of undefined at Proxy.modelValue (app.js:29)" What am i doing wrong?

This is my component:

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

Any suggestions?

0 likes
1 reply

Please or to participate in this conversation.