你好，我是Kagol，个人公众号： 前端开源星球 。

Fluent Editor是一个基于Quill 2.0的富文本编辑器，它在Quill的基础上扩展了丰富的模块和格式，框架无关、功能强大、开箱即用。

• 源码： https://github.com/opentiny/fluent-editor/ （欢迎 Star ⭐）
• 官网： https://opentiny.github.io/fluent-editor/

Quill 内置公式

Quill内置了公式的功能，基于 KaTeX ，使用时需要安装katex依赖，并导入对应的样式，具体使用示例如下：

安装katex依赖：

npm i katex

使用Quill内置formula公式：

效果图：

要插入上图中的求和公式，需要知道该公式对应的KaTeX语法。

\sum_{i=1}^{n} i^2

然后点击工具栏的公式按钮，并将上面的公式粘贴到公式输入框中，按回车键就可以插入公式啦。

以下是效果演示（Gif 动图）：

从上面的演示动图不难看出，Quill内置公式主要有以下问题：

• 对于用户来说 有一定的使用成本 ，用户需要记住KaTeX公式的语法。
• 只支持新增和删除公式， 不支持编辑公式 。

LaTeX 可编辑公式

2024年9月27日，kiss-keray提交了一个PR，为Fluent Editor增加mathlive可编辑公式能力。

过了两天kiss-keray关闭了这个PR，我觉得挺可惜的，就问了一句为什么关闭了呢？

过了两天kiss-keray又重新提交了一个PR #95，经过20天左右的检视和交流，今天该PR已合入主干分支，并发布正式版本：v3.22.0 ??。

感谢kiss-keray为Fluent Editor做出的贡献，让Fluent Editor富文本拥有这么棒的公式编辑体验！

欢迎朋友们体验和使用?

使用可编辑公式之前，需要先安装 mathlive 依赖。

npm i @opentiny/fluent-editor@3.22.0 mathlive

可编辑公式也支持KaTex/LaTeX语法，可以直接复制下面的公式，粘贴到公式输入框中。

\sum_{i=1}^{n} i^2

效果如下：

同时也支持对公式进行编辑，点击公式输入框右边的小键盘图标即可呼起公式编辑键盘，里面包含非常丰富的公式，使用起来非常方便，也不需要记忆复杂的KaTeX/LaTeX公式语法。

以下是效果演示（Gif 动图）：

欢迎通过以下链接体验更多可编辑公式的功能?

可编辑公式体验地址： https://opentiny.github.io/fluent-editor/docs/formula

往期推荐文章

• ?Fluent Editor：一个基于Quill 2.0的富文本编辑器，功能强大、开箱即用！
• ?喜报！Fluent Editor开源富文本迎来了第一位贡献者
• ?Fluent Editor富文本开源2个月的总结：增加格式刷、截屏、TypeScript类型声明等新特性

联系我们

GitHub： https://github.com/opentiny/tiny-vue （欢迎 Star ⭐）

官网： https://opentiny.design/tiny-vue

B站： https://space.bilibili.com/15284299

个人博客： https://kagol.github.io/blogs

小助手微信：opentiny-official

公众号：OpenTiny