Vue项目中CKEditor5已渲染DOM但前端不可见问题求助

我正在尝试创建一个支持Markdown内容编辑的CKEditor组件，目前DOM中已渲染出对应的HTML代码，但前端页面上完全看不到编辑器内容。

渲染出的DOM代码 #

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

Vue组件代码 #

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

已安装的依赖版本 #

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

解决方法 #

• 补充缺失的样式文件：自定义构建CKEditor时不会自动导入样式，需要手动引入。在Vue组件的<style>标签中添加：

  @import '@ckeditor/ckeditor5-editor-classic/src/classiceditor.css';
  @import '@ckeditor/ckeditor5-core/theme/reset.css';
  @import '@ckeditor/ckeditor5-basic-styles/theme/bold.css';
  @import '@ckeditor/ckeditor5-basic-styles/theme/italic.css';
  

  若允许使用完整构建样式，也可直接引入：

  @import '@ckeditor/ckeditor5-build-classic/build/ckeditor.css';
  

• 调整Markdown插件配置：将Markdown作为核心插件配置，而非额外插件，并显式指定工具栏按钮：

  editorConfig: {
      plugins: [Markdown, Essentials, Bold, Italic],
      toolbar: ['bold', 'italic'],
      initialData: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut...'
  }
  

• 检查版本兼容性：@ckeditor/ckeditor5-vue@4.x对应Vue 3，若使用Vue 2需降级至ckeditor5-vue@3.x版本，确保Vue与组件版本匹配。
• 排查父元素样式：确认编辑器的父元素未设置display: none、height: 0或overflow: hidden等导致隐藏的样式。

内容的提问来源于stack exchange，提问作者Pinnokkio