分享一款前端富文本编辑器 CKEditor (一)
摘要
本文是 CKEditor 系列介绍的开篇，详细介绍了 CKEditor 5 前端富文本编辑器的功能、特点以及在不同场景下的应用示例。读者可以通过本文了解 CKEditor 5 的基本特性以及如何快速开始使用。
概述
CKEditor 5提供了各种类型的所见即所得编辑解决方案。从类似于Google Docs和Medium的编辑器，到类似于Slack或Twitter的应用程序，一切都可以在一个编辑框架中实现。
该编辑器配备了设计精良的用户界面和完美的用户体验，因此用户可以轻松管理媒体和表格，并使用高级功能，如自动格式化、提及、从Word粘贴或Markdown支持。
特点
- 功能丰富：CKEditor拥有数百种功能，可以改变内容编辑的方式。
- 多样的用户界面：提供多种编辑器类型和用户界面配置选项，满足不同需求。
- 强大的AI助手：集成了AI内容创建工具，支持文本写作、翻译等功能。
- 实时协作编辑：提供Google Doc般的实时协作体验，无需第三方应用。
- 异步协作编辑：通过评论、修订历史等功能，简化内容编辑工作流程。
- 生产力工具包：提供文档导航、内容创建、模板等工具，提高生产效率。
- 国际化支持：支持40多种语言的全面翻译用户界面。
- PDF和Word导出：支持将内容自动转换为PDF或Word文件。
- Word导入：高质量地将DOCX文件转换为HTML格式。
- Office增强粘贴：支持更丰富的格式选项粘贴。
- 文件上传和管理（CKBox）：现代、安全的文件上传、存储和服务方式。
- 源代码编辑和HTML支持：支持任何HTML元素、属性、样式或类。
- Markdown编辑器：支持Markdown输入和输出。
- 无头编辑器：可与应用程序其余部分良好集成。
- 移动友好编辑器：无需特殊配置，适用于移动设备。
- 方程式和化学式：支持添加数学方程式和化学式。
- 拼写检查器：支持多语言拼写和语法检查。
Demo
- 功能演示(Feature-rich editor)：展示CKEditor的各种功能，如文本编辑、插入多媒体等。
- 用户界面演示(Different user interfaces)：展示不同的编辑器类型和用户界面配置选项。
- AI助手演示(AI Assistant)：展示AI内容创建工具的使用场景。
- 实时协作编辑演示(Collaborative editor - real-time)：演示实时协作编辑的功能和效果。
- 异步协作编辑演示(Collaborative editor - asynchronous)：演示评论、修订历史等功能的使用方式。
- 生产力工具包演示(Productivity Pack)：展示文档导航、模板等工具的使用效果。
- 国际化演示(Internationalization)：展示多语言支持的效果。
- PDF和Word导出演示(Export to PDF & Word)：演示将内容转换为PDF或Word文件的流程。
- Word导入演示(Import from Word)：演示将DOCX文件转换为HTML格式的过程。
- Office增强粘贴演示(Paste from Office Enhanced)：演示不同粘贴方式的效果对比。
- 文件上传和管理演示(File upload and management - CKBox)：演示CKBox的文件上传和管理功能。
- 源代码编辑和HTML支持演示(Source code editing and HTML support)：演示编辑原始HTML的功能。
- Markdown编辑器演示(Markdown editor)：演示Markdown输入和输出的效果。
- 无头编辑器演示(Headless editor)：演示无头编辑器的集成方式。
- 移动友好编辑器演示(Mobile friendly editor)：演示在移动设备上的适用性。
- 方程式和化学式演示(Equations and formulas - MathType)：演示添加数学方程式和化学式的方法。
- 拼写检查器演示(Spellchecker - WProofreader)：演示拼写和语法检查器的使用效果。
使用方式及建议
- 使用CDN 快速启动 CKEditor 5
- 建议：使用CDN 快速启动 CKEditor 5。
- 地址：ckeditor.com/docs/ckedit...
- 安装预定义的 CKEditor 5 构建
- 建议：安装预定义的 CKEditor 5 构建。
- 地址：github.com/ckeditor/ck...
- 定制 CKEditor 5 安装
- 建议：定制 CKEditor 5 安装。
- 地址：ckeditor.com/ckeditor-5/...
- 与框架集成
Vue3 使用 CKEditor
sql
1. 安装依赖
pnpm add @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic入口文件
js
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 导入 CKEditor5 Vue 组件
import CKEditor from '@ckeditor/ckeditor5-vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
// 使用 CKEditor5 Vue 组件
app.use( CKEditor )
app.mount('#app')App.vue
vue
<script setup>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
const editor = ClassicEditor
const editorData = '<p>Content of the editor.</p>'
const editorConfig = {}
</script>
<template>
<div class="container" id="main">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<style scoped>
.container {
width: 100%;
height: 100%;
background: #000;
padding: 40px;
}
</style>全局 less 中设置 CKEditor 样式
less
// 设置CKEditor编辑器 内容区域高度
// 设置 默认字体颜色
.ck-content {
height: 300px;
color: #333;
}
// 去掉 logo
.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by {
display: none !important;
}
结语
CKEditor 5是一款功能丰富、用户界面友好的前端富文本编辑器，具有广泛的应用场景和强大的扩展性。本文介绍了其基本特性，并展示了多种应用示例，为读者提供了初步了解和使用 CKEditor 5 的指南。未来，我们将会深入探讨 CKEditor 系列的更多扩展内容，带来更多有关前端编辑器的技术和应用分享。