FullClassicEditor

自定义功能齐全经典富文本编辑器

full-classic-editor 在CKEditor5 ClassiEditor的基础上扩展了Alignment、Hilight、Code-Block, Font-Color、Font-Fammily、Font-BackgroundColor等功能

用法如下：在Vue项目的根目录下执行如下命令安装full-classic-editor依赖包

# yarn 安装
yarn add -D full-classic-editor@latest
# npm 安装
npm install -save -dev full-classic-editor@latest

同时还需要安装@ckeditor/ckeditor5-vue依赖包

# yarn 安装
yarn add -D @ckeditor/ckeditor5-vue@latest
# npm 安装
npm install -save -dev @ckeditor/ckeditor5-vue@latest

在Vue 项目的main.js 文件中安装CKEditor组件

import { createApp } from 'vue';
import './style.css'
import App from './App.vue'
import router from '@/router/index'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import CKEditor from '@ckeditor/ckeditor5-vue'

const app = createApp(App)
app.use(createPinia())
app.use(ElementPlus)
app.use(router)
app.use(CKEditor) // 安装CKEditor插件
app.mount('#app')

在页面组件中使用full-classic-editor编辑器

<script setup>
    import { ref } from 'vue'
    import Editor from 'full-classic-editor'
    const editor = Editor
    let editorData = ref('<p>Content of the editor</p>');

</script>
<template>
   <div id="editor-container">
        <Ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></Ckeditor>
   </div>
</template>

Ckeditor组件中的editor属性变量使用就是我们安装的full-classic-editor包中定制的FullClassicEditor编辑器。