'CKEditor 5 not working on Vue 3 Composition API

I am trying to use CKEditor with vue 3 composition api locally but the editor not shown on the page here is may component

<template>
    <PageWrapper title="Post">
        <CKEditor :editor="editor"></CKEditor>
    </PageWrapper>
</template>


<script setup>
import PageWrapper from '@/components/PageWrapper.vue'
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

const editor = ClassicEditor
</script>

What's wrong?

vue.jsckeditorvue-composition-api


Solution 1:[1]

From the official documentation it's pretty straightforward, using script setup, i found it working this way



    
    import CKEditor from '@ckeditor/ckeditor5-vue'
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
    
    const editor = ClassicEditor
    const ckeditor = CKEditor.component

then you can use the component in the template properly.

Solution 2:[2]

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import {reactive}    from 'vue'

export default {
    setup() {
        let editor = reactive(ClassicEditor);
        return {editor}
    }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Kalen

Related Questions