一直没找到一个合适的开源富文本？何不尝试下 Fluent Editor，一个基于 Quill 2.0 的富文本编辑器，功能强大，开箱即用！-优快云博客

本文链接：https://blog.youkuaiyun.com/OpenTiny/article/details/141395034

本文由体验技术团队Kagol原创。
今年4月份，听到 Quill 2.0 正式发布的消息，我心情非常激动，立马体验了下，并写了一篇文章。

重回铁王座！时隔5年！Quill 2.0 终于发布啦🎉

由于越来越多用户声音希望提供富文本组件，于是我们基于 Quill 2.0 封装了一个功能更全面的 Fluent Editor 富文本。

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

接下来我就带大家一起使用下 Fluent Editor，使用起来基本上和 Quill 没什么区别，只需要重点关注下增强的部分，比如表格、附件、@提醒、表情等模块。

1 快速上手

Fluent Editor 基于 Quill 2.0 进行封装，扩展了很多实用的模块功能，使用方式和 Quill 一样。

安装依赖：

npm i @opentiny/fluent-editor

编写 HTML：

<div id="editor">
  <p><strong>Fluent Editor</strong> 是一个基于 <a class="ql-normal-link" href="https://quilljs.com/" target="_blank">Quill 2.0</a> 的富文本编辑器，在 Quill 基础上扩展了丰富的模块和格式，功能强大、开箱即用。</p>
  <p><br></p>
  <p>官网：<a class="ql-normal-link" href="https://opentiny.github.io/fluent-editor/" target="_blank">https://opentiny.github.io/fluent-editor/</a></p>
  <p>源码：<a class="ql-normal-link" href="https://github.com/opentiny/fluent-editor/" target="_blank">https://github.com/opentiny/fluent-editor/</a>（欢迎 Star ⭐）</p>
</div>

引入样式：

@import '@opentiny/fluent-editor/style.css';

初始化 Fluent Editor 编辑器：

import FluentEditor from