​Quill：37k+ stars 一款API驱动的富文本编辑器！非常强大！开源免费！

Quill 是一个开源的、跨平台、跨浏览器的富文本编辑器，专为兼容性和可扩展性而构建。凭借其可扩展架构和富有表现力的 API，可以完全自定义它以满足个性化的需求。用户可以非常方便地实现自定义功能。它由 Jason Chen 和 Byron Milligan 两位大神创建，并由 Slab 积极维护。

项目完全免费开源，目前在Github上以获得 37.1k stars 非常受欢迎！

该富文本编辑器的特点：

• API 驱动的设计

• 支持 Chrome, Firefox, Safari, and IE 9+

• 标准化 HTML

• 通过其模块和富有表现力的 API 完全可定制

• 快速且轻量级

• 可以将内容表示为 JSON，更易于处理和转换为其他格式；
• 提供两个主题以快速轻松地更改编辑器的外观

架构设计

Quill.js 架构清晰，核心功能简介：

• Delta：富文本数据层，负责描述数据

• Parchment：富文本控制器层，负责操控 dom，将数据变化映射到 UI 表示

• Formats ：Quill支持多种格式，包括UI控件和API调用

• Module：模块化形式，负责解耦功能项，管控模块加载

下载安装

方式1：npm安装

npm - npm install quill

方式2：CDN引入

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.0.0/quill.js"></script>
<script src="//cdn.quilljs.com/1.0.0/quill.min.js"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet" />

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet" />
<script src="//cdn.quilljs.com/1.0.0/quill.core.js"></script>

快速体验

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

效果展示

附官网地址：

官网：https://quilljs.com/

开源地址：https://github.com/quilljs/quill/

开发手册：https://quilljs.com/docs/quickstart/

END

点点关注不迷路

本文发表于公众号【爱编程爱技术】

关注我们，阅读更多精彩内容

点击上方关注我们，谢谢支持！

往期推荐：