Fluent Editor:华为开源 基于 Quill 2.0 的富文本编辑器

科技   2024-10-30 17:01   湖北  

Fluent Editor 是由华为 OpenTiny 开源的一个基于 Quill 2.0 的富文本编辑器,它在 Quill 的基础上扩展了丰富的模块和格式功能,支持在 Vue、React、Angular 等框中使用,强大且灵活。Fluent Editor 支持多种功能模块,例如表格、附件、@ 提醒、表情、文件上传、截图等。

除了 Quill 内置的工具栏之外,还支持以下工具栏:

undo 撤销、redo 重做、file 文件上传,需要启用 file 模块、emoji 插入表情,需要启用 emoji-toolbar 模块、better-table 表格,需要启用 better-table 模块、format-painter 格式刷、screenshot 截屏
使用方法:

安装

// npm
npm i @opentiny/fluent-editor

使用

// 引入 css 样式文件
@import '@opentiny/fluent-editor/style.css';
// import
import FluentEditor from '@opentiny/fluent-editor'
// use
const editor = new FluentEditor('#editor', {
  theme'snow',
})
功能和特性:

模块化设计:编辑器采用模块化设计,允许开发者根据需要选择和定制所需的功能。

丰富的 API:提供了丰富的 API,使得开发者可以灵活地控制编辑器的行为和外观。

多种功能:支持各种富文本编辑功能,包括文本格式化、图片插入、表格创建、列表管理等。

定制化主题:允许开发者定制编辑器的主题和样式,以适应不同的品牌和设计需求。

无依赖性:作为一个独立的 Web Components 库,Fluent Editor 不依赖于任何特定的前端框架或库。

易于集成:可以轻松集成到现有的项目中,无论是使用原生 JavaScript、React、Vue 还是其他框架。

响应式设计:编辑器支持响应式布局,确保在不同设备和屏幕尺寸上都能提供良好的用户体验。

文档和社区支持:提供了详尽的文档和活跃的社区支持,帮助开发者快速上手和解决开发中遇到的问题。


《前端资源推荐》公众号收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等,如有其他优秀资源,欢迎发消息投稿,感谢点赞、在看、转发、关注!!!

GitHub:https://github.com/opentiny/fluent-editor

官方文档:https://opentiny.github.io/fluent-editor/
其他推荐:
Vue Draggable Plus:支持多种拖拽方式的组件库
600+ CSS Loading 动画加载器 

Vuetify:谷歌 Material 风格 响应式 UI 组件库

GitHub 56k+ Star AI 项目 截图就能生成前端代码
Tesseractjs:OCR 前端识别提取图像文本字符
美呆了!纯前端技术实现 Web 原神启动
Geeker Admin:基于 Element Plus 中后台管理系统

shadcn/ui:复制就能使用 GitHub 高颜值 UI 组件库

前端资源推荐
推荐分享各种前端组件UI、插件工具、中后台系统、低代码、可视化、开源项目、学习资源、特效源码等
 最新文章