forked from opentiny/tiny-vue
Kagol
4bcb2e7781
* fix(fluent-editor): fix image upload * fix: fix toolbar style * refactor(fluent-editor): use optional chaining for safety |
||
---|---|---|
.. | ||
src | ||
test | ||
.eslintignore | ||
.eslintrc.js | ||
.gitignore | ||
.prettierignore | ||
.prettierrc | ||
README.md | ||
VersionSet.xml | ||
app_define.json | ||
index.html | ||
jest.config.js | ||
origin.html | ||
package.json | ||
tsconfig.json | ||
verifyCommit.js | ||
vite.config.ts |
README.md
FluentEditor 富文本编辑器
FluentEditor 是一个基于 Quill 2.0 的富文本编辑器,在 Quill 基础上扩展了表格、图片、超链接、复制粘贴、插入表情、文件上传、@提醒、斜杆菜单等丰富的模块和格式,框架无关、兼容 Quill API、兼容 Quill 模块生态。
项目优势
FluentEditor 主要有以下特点和优势:
- 包含30多种丰富的模块和格式,除了 Quill 内置的21种格式之外,还扩展和增强了表格、图片、超链接、字数统计、表情、文件上传、复制粘贴、@提醒、斜杆快捷菜单、截图等15种模块和格式
- 强大的表格功能,支持在工具栏插入指定行列的表格、表格行高/列宽拖拽、插入行/列、删除行/列、合并/拆分单元格等丰富的表格操作
- 与框架无关,可以在 Vue、React、Angular 等多种框架中使用
- 兼容 Quill 所有 API,兼容 Quill 生态模块和格式
快速入门
安装 FluentEditor:
npm i @opentiny/fluent-editor
编写html:
<div id="editor">
<p>Hello FluentEditor!</p>
</div>
引入样式:
@import '@opentiny/fluent-editor/dist/style.css'
初始化 FluentEditor 编辑器:
import FluentEditor from '@opentiny/fluent-editor'
const editor = new FluentEditor('#editor', {
theme: 'snow'
})
❤️ 致谢
感谢:
- quill 项目,它是一款API驱动的富文本编辑器,采用模块化架构,可扩展性好,易于使用,支持跨平台,FluentEditor 基于 Quill 扩展和增强了表格、图片、超链接等大量模块和格式。
- quill-better-table 项目,它增强了 Quill 内置表格模块,增加了丰富的功能,FluentEditor 的表格操作功能基于 quill-better-table。
- quill-emoji 项目,它是一个用于表情符号的 Quill 模块,FluentEditor 的插入表情功能基于 quill-emoji。
- quill-blot-formatter 项目,它是一个用于调整图像和视频大小的 Quill 模块,FluentEditor 的图片缩放功能基于 quill-blot-formatter。