quill

<h1 align="center"> <a href="https://quilljs.com/" title="Quill">Quill富文本编辑器</a> </h1> <p align="center"> <a href="https://quilljs.com/" title="Quill"><img alt="Quill标志" src="https://yellow-cdn.veclightyear.com/ab5030c0/3f1c34f1-9091-499a-9f44-a0ce8c279913.svg" width="180"></a> </p> <p align="center"> <a title="文档" href="https://quilljs.com/docs/quickstart"><strong>文档</strong></a> &#x2022; <a title="开发" href="https://github.com/slab/quill/blob/main/.github/DEVELOPMENT.md"><strong>开发</strong></a> &#x2022; <a title="贡献" href="https://github.com/slab/quill/blob/main/.github/CONTRIBUTING.md"><strong>贡献</strong></a> &#x2022; <a title="互动沙盒" href="https://quilljs.com/playground/"><strong>互动沙盒</strong></a> </p> <p align="center"> <a href="https://github.com/slab/quill/actions" title="构建状态"><img src="https://yellow-cdn.veclightyear.com/ab5030c0/53872b47-bcf0-4027-836c-201938b6ce3d.svg" alt="构建状态"></a> <a href="https://npmjs.com/package/quill" title="版本"><img src="https://yellow-cdn.veclightyear.com/ab5030c0/bf3d020a-a7cf-428e-8a9b-77346fb85e9d.svg" alt="版本"></a> <a href="https://npmjs.com/package/quill" title="下载量"><img src="https://yellow-cdn.veclightyear.com/ab5030c0/a262ec45-bb47-46cc-a27e-ffc6e328660f.svg" alt="下载量"></a> </p> <hr/>

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