Quill：一个强大的开源免费富文本编辑器！

Quill是一款开源、免费的富文本编辑器，具有强大的功能和高度可定制性，采用API驱动设计，支持跨平台、跨浏览器使用。用户可以根据个性化需求轻松实现自定义功能。

该编辑器采用标准化HTML，架构清晰，提供了两个主题以及多种格式支持。其快速且轻量级的特点使得内容可轻松转换为JSON等其他格式。

Quill的核心功能包括Delta、Parchment、Formats和Module，让用户能够轻松地操控富文本数据和UI表现。安装方式简单灵活，可通过npm或CDN引入。

快速体验和效果展示也十分简单，只需几行代码即可。官方提供详尽的开发手册，方便用户快速上手。

Quill的官网地址为quilljs.com，开源地址在GitHub上可查看。

该富文本编辑器的特点：

• API 驱动的设计
• 支持 Chrome, Firefox, Safari, and IE 9+
• 标准化 HTML
• 通过其模块和富有表现力的 API 完全可定制
• 快速且轻量级
• 可以将内容表示为 JSON，更易于处理和转换为其他格式；
• 提供两个主题以快速轻松地更改编辑器的外观

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

• Delta：富文本数据层，负责描述数据
• Parchment：富文本控制器层，负责操控 dom，将数据变化映射到 UI 表示
• Formats ：Quill支持多种格式，包括UI控件和API调用
• Module：模块化形式，负责解耦功能项，管控模块加载

下载安装：

方式1：npm安装

<code>npm - npm install quill</code>

方式2：CDN引入

<code><em><!-- Main Quill library --></em> <<strong>script</strong> src="//cdn.quilljs.com/1.0.0/quill.js"></<strong>script</strong>> <<strong>script</strong> src="//cdn.quilljs.com/1.0.0/quill.min.js"></<strong>script</strong>> <em><!-- Theme included stylesheets --></em> <<strong>link</strong> href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" /> <<strong>link</strong> href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet" /> <em><!-- Core build with no theme, formatting, non-essential modules --></em> <<strong>link</strong> href="//cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet" /> <<strong>script</strong> src="//cdn.quilljs.com/1.0.0/quill.core.js"></<strong>script</strong>></code>

快速体验：

<code><em><!-- Include stylesheet --></em> <<strong>link</strong> href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <em><!-- Create the editor container --></em> <<strong>div</strong> id="editor"> <<strong>p</strong>>Hello World!</<strong>p</strong>> <<strong>p</strong>>Some initial <<strong>strong</strong>>bold</<strong>strong</strong>> text</<strong>p</strong>> <<strong>p</strong>><<strong>br</strong>></<strong>p</strong>> </<strong>div</strong>> <em><!-- Include the Quill library --></em> <<strong>script</strong> src="https://cdn.quilljs.com/1.3.6/quill.js"></<strong>script</strong>> <em><!-- Initialize Quill editor --></em> <<strong>script</strong>> <strong>var</strong> quill = <strong>new</strong> <strong>Quill</strong>('#editor', { theme: 'snow' }); </<strong>script</strong>></code>

效果展示：

官网：https://quilljs.com/

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