[英]VueJS CKEditor5 not visible
我正在尝试创建一个显示 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"
有人可以帮我吗? 我非常感谢您的支持。
如果你使用的是 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 安装插件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.