VueJS CKEditor5不可见

Question

我正在尝试创建一个显示ckeditor的组件，它允许我编写Markdown内容。由于一个未知的原因，前面没有可见的ckeditor，但是DOM包含html代码：

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

这是我的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>

正如我已经说过的，在前端看不到任何东西，但是html是在dom中呈现的。

我不需要编辑器的所有功能，只需要一些和Markdown。这些是我安装的软件包：

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

有人能帮帮我吗？我非常感谢你的支持。

Answer 1

如果你使用的是Vue 3，你可以使用这个

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

记住通过npm安装安装插件--保存@ckeditor/ckeditor5-vue @ckeditor/ckeditor5--构建-经典

参考文献Vue.js 3+富文本编辑器组件