likes
comments
collection
share

分享一款前端富文本编辑器 CKEditor (一)

作者站长头像
站长
· 阅读数 35

分享一款前端富文本编辑器 CKEditor (一)

分享一款前端富文本编辑器 CKEditor (一)

摘要

本文是 CKEditor 系列介绍的开篇，详细介绍了 CKEditor 5 前端富文本编辑器的功能、特点以及在不同场景下的应用示例。读者可以通过本文了解 CKEditor 5 的基本特性以及如何快速开始使用。

概述

CKEditor 5提供了各种类型的所见即所得编辑解决方案。从类似于Google Docs和Medium的编辑器，到类似于Slack或Twitter的应用程序，一切都可以在一个编辑框架中实现。

该编辑器配备了设计精良的用户界面和完美的用户体验，因此用户可以轻松管理媒体和表格，并使用高级功能，如自动格式化、提及、从Word粘贴或Markdown支持。

官网: ckeditor.com/ckeditor-5/

特点

  • 功能丰富：CKEditor拥有数百种功能，可以改变内容编辑的方式。
  • 多样的用户界面：提供多种编辑器类型和用户界面配置选项，满足不同需求。
  • 强大的AI助手：集成了AI内容创建工具，支持文本写作、翻译等功能。
  • 实时协作编辑：提供Google Doc般的实时协作体验，无需第三方应用。
  • 异步协作编辑：通过评论、修订历史等功能，简化内容编辑工作流程。
  • 生产力工具包：提供文档导航、内容创建、模板等工具，提高生产效率。
  • 国际化支持：支持40多种语言的全面翻译用户界面。
  • PDF和Word导出：支持将内容自动转换为PDF或Word文件。
  • Word导入：高质量地将DOCX文件转换为HTML格式。
  • Office增强粘贴：支持更丰富的格式选项粘贴。
  • 文件上传和管理（CKBox）：现代、安全的文件上传、存储和服务方式。
  • 源代码编辑和HTML支持：支持任何HTML元素、属性、样式或类。
  • Markdown编辑器：支持Markdown输入和输出。
  • 无头编辑器：可与应用程序其余部分良好集成。
  • 移动友好编辑器：无需特殊配置，适用于移动设备。
  • 方程式和化学式：支持添加数学方程式和化学式。
  • 拼写检查器：支持多语言拼写和语法检查。

Demo

使用方式及建议

Vue3 使用 CKEditor

1. 安装依赖
pnpm add @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

入口文件

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

<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 样式

// 设置CKEditor编辑器 内容区域高度
// 设置 默认字体颜色
.ck-content {
  height: 300px;
  color: #333;
}

// 去掉 logo
.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by {
  display: none !important;
}

分享一款前端富文本编辑器 CKEditor (一)

结语

CKEditor 5是一款功能丰富、用户界面友好的前端富文本编辑器，具有广泛的应用场景和强大的扩展性。本文介绍了其基本特性，并展示了多种应用示例，为读者提供了初步了解和使用 CKEditor 5 的指南。未来，我们将会深入探讨 CKEditor 系列的更多扩展内容，带来更多有关前端编辑器的技术和应用分享。

转载自:https://juejin.cn/post/7341983885726531623
评论
请登录