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 install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic 安裝插件

Ref Vue.js 3+ 富文本編輯器組件