Quill富文本编辑器

文档 • 开发 • 贡献 • 互动沙盒

Quill是一个现代化的富文本编辑器,专注于兼容性和可扩展性.它由Jason Chen和Byron Milligan创建,并由Slab积极维护.

入门请查看https://quilljs.com/的文档、指南和实时演示!

快速开始

使用css选择器实例化一个新的Quill对象,该选择器应用于即将成为编辑器的div.

<!-- 包含Quill样式表 -->
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
  rel="stylesheet"
/>

<!-- 创建工具栏容器 -->
<div id="toolbar">
  <button class="ql-bold">加粗</button>
  <button class="ql-italic">斜体</button>
</div>

<!-- 创建编辑器容器 -->
<div id="editor">
  <p>你好,世界!</p>
  <p>一些初始的<strong>加粗</strong>文本</p>
  <p><br /></p>
</div>

<!-- 包含Quill库 -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>

<!-- 初始化Quill编辑器 -->
<script>
  const quill = new Quill("#editor", {
    theme: "snow",
  });
</script>

查看Quill网站了解更多文档、指南和实时沙盒!

下载

npm install quill

CDN

<!-- 主要Quill库 -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>

<!-- 包含主题的样式表 -->
<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"
/>

<!-- 无主题,格式化,非必要模块的核心构建 -->
<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>

社区

获得帮助或保持最新.

• 在Issues上贡献
• 在Discussions上提出问题

许可证

BSD 3-clause