Quill一款所见即所得的在线富文本编辑器
Quill Rich Text Editor
Quill 是一款现代化的富文本编辑器，专为兼容性和可扩展性而打造。通过简单的 API 精细访问编辑器的内容、更改和事件。使用 JSON 作为输入和输出，可实现一致且确定性的运行。
要开始使用，请访问 https://quilljs.com/ 获取文档、指南和在线演示！
为什么选择 Quill
自 Web 诞生以来，内容创建一直是其核心。<textarea> 为几乎所有 Web 应用程序提供了原生且必不可少的解决方案。但有时，您可能需要为文本输入添加格式。这时，富文本编辑器就派上用场了。有很多解决方案可供选择，但 Quill 带来了一些值得考虑的现代理念。
API 驱动设计
富文本编辑器旨在帮助人们编写文本。然而令人惊讶的是，大多数富文本编辑器并不知道用户编写了什么文本。这些编辑器通过与 Web 开发人员相同的视角来查看内容：DOM。这带来了一种阻抗不匹配，因为 DOM 由以不平衡树形式组织的节点组成，而文本由行、单词和字符组成。
没有以字符为度量单位的 DOM API。由于这一限制，大多数富文本编辑器无法回答诸如“此范围内的文本是什么？”或“光标是否位于粗体文本上？”之类的简单问题。尝试在这些原语之上构建丰富的编辑体验非常困难且令人沮丧。
Quill 的设计初衷是编辑和字符，并将其 API 构建在这些以文本为中心的自然单元之上。要确定某个元素是否为粗体，Quill 无需遍历 DOM 查找 <b> 或 <strong> 节点或字体粗细样式属性——只需调用 getFormat(5, 1) 即可。其所有核心 API 调用都允许访问或修改任意索引和长度。其事件 API 还以直观的 JSON 格式报告更改。无需解析 HTML 或 diff DOM 树。
快速入门
使用 CSS 选择器实例化一个新的 Quill 对象，该对象将作为编辑器的 div。
html
<!-- Include Quill stylesheet -->
<link
href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
rel="stylesheet"
/>
<!-- Create the toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- 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.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
const quill = new Quill("#editor", {
theme: "snow",
});
</script>请访问 Quill 网站获取更多文档、指南。
Download
shell
npm install quillCDN
html
<!-- Main Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<!-- Theme included stylesheets -->
<link
href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.bubble.css"
rel="stylesheet"
/>
<!-- Core build with no theme, formatting, non-essential modules -->
<link
href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.js"></script>License
BSD 3-clause