该富文本编辑器的特点:
- 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>
暂无评论内容