VueJS CKEditor5 不可见

Question

I'm trying to create a component showing ckeditor which allows me, to write Markdown content. For an unknown reason, there's no visible ckeditor in the frontend but DOM contains html code:

<div style="display: none;"></div>
<div class="ck ck-reset ck-editor ck-rounded-corners" role="application" dir="ltr" lang="de" aria-labelledby="ck-editor__label_ec33b345a3a3b06ddbf2aacd8201fc695">
    <label class="ck ck-label ck-voice-label" id="ck-editor__label_ec33b345a3a3b06ddbf2aacd8201fc695">Rich Text Editor</label>
    <div class="ck ck-editor__top ck-reset_all" role="presentation">
        <div class="ck ck-sticky-panel">
            <div class="ck ck-sticky-panel__placeholder" style="display: none;"></div>
            <div class="ck ck-sticky-panel__content">
                <div class="ck ck-toolbar ck-toolbar_grouping" role="toolbar" aria-label="Editor Werkzeugleiste">
                    <div class="ck ck-toolbar__items"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="ck ck-editor__main" role="presentation">
        <div class="ck-blurred ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline" lang="de" dir="ltr" role="textbox" aria-label="Bearbeitungsbereich des Editors: main" contenteditable="true">
            <br data-cke-filler="true">
        </div>
    </div>
</div>

This is my VueComponent:

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

<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown';

export default {
    components: {
        ckeditor: CKEditor.component
    },
    data: () => ({
        editor: ClassicEditor,
        editorData: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut...',
        editorConfig: {
            extraPlugins: [Markdown, Essentials, Bold, Italic]
        }
    })
};
</script>

As I already said, nothing is visible in the frontend but html is rendered inside of the dom.

I do not need all features of the editor, just a few and Markdown. These are the packages I've installed:

"@ckeditor/ckeditor5-basic-styles": "^35.1.0",
"@ckeditor/ckeditor5-build-classic": "^35.1.0",
"@ckeditor/ckeditor5-core": "^35.1.0",
"@ckeditor/ckeditor5-editor-classic": "^35.1.0",
"@ckeditor/ckeditor5-essentials": "^35.1.0",
"@ckeditor/ckeditor5-markdown-gfm": "^35.1.0",
"@ckeditor/ckeditor5-vue": "^4.0.1",
"ckeditor5": "^35.1.0"

Could anyone help me please? I really appreciate your support.

Answer 1

If you are using Vue 3 you can use this one

<template>
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>
    
<script setup>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    import CKEditor from '@ckeditor/ckeditor5-vue';
    import { ref } from '@vue/reactivity';
    
    const ckeditor = CKEditor.component;
    const editor = ClassicEditor;
    const editorData = ref('<p>Content of the editor.</p>');
    const editorConfig = ref({
    
    })
    
    </script>
    
    <style>
    </style>

Remember to install the plugin by npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

Ref Vue.js 3+ rich text editor component