多功能
一个适应性强的生态系统，能够处理端到端的文档编辑、与第三方工具的互操作性、文档管理和协作。
简单设置
以下是如何使用 Vue 富文本编辑器的一个快速示例
CKEditor 5 的组件，使用 Vite！
1
创建项目
使用基本 Vite 模板创建项目，并将
工作目录更改为新创建的项目。
npm create vite@latest ckeditor5-vue -- --template vue && cd ckeditor5-vue2
安装软件包
安装 Vue 文本编辑器组件和您选择的编辑器类型
的依赖项，根据您的首选编辑体验。在本例中，我们使用经典编辑器。
npm install ckeditor5 @ckeditor/ckeditor5-vue3
添加组件
将 src/App.vue 的内容替换为负责导入和初始化编辑器的代码。
<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import {
ClassicEditor,
Bold,
Essentials,
Heading,
Indent,
IndentBlock,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
Table,
Undo
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
export default {
name: 'app',
components: {
ckeditor: CKEditor.component
},
data() {
return {
editor: ClassicEditor,
editorData: '<h1>Hello from CKEditor 5!</h1>',
editorConfig: {
toolbar: [
'undo', 'redo', '|',
'heading', '|', 'bold', 'italic', '|',
'link', 'insertTable', 'mediaEmbed', '|',
'bulletedList', 'numberedList', 'indent', 'outdent'
],
plugins: [
Bold,
Essentials,
Heading,
Indent,
IndentBlock,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
Table,
Undo
],
}
};
}
}
</script>
<template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
4
完成！
在项目的目录中执行以下命令来运行应用程序
。
npm run dev