安装

Quill 提供多种便捷的现成使用方式。

¥Quill comes ready to use in several convenient forms.

CDN

提供了一个由 jsDelivr 支持的全球分布且可用的 CDN。这是开始使用 Quill 最便捷的方式，无需构建步骤或包管理器。

¥A globally distributed and available CDN is provided, backed by jsDelivr. This is the most convenient way to get started with Quill, and requires no build steps or package managers.

完整构建

¥Full Build

对于大多数用户来说，完整构建是开始使用 Quill 最简单的方法。它包含核心 Quill 库，以及常用主题、格式和模块。

¥For most users, the full build is the easiest way to get started with Quill. It include the core Quill library, as well as common themes, formats, and modules.

要导入完整构建，你需要包含 "quill.js" 脚本和你想要使用的主题的样式表。

¥To import the full build, you will need to include the "quill.js" script and the stylesheet for the theme you wish to use.

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/quill/2.0.0-dev.4/quill.js"></script>
<link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/quill/2.0.0-dev.4/quill.snow.css" rel="stylesheet">

<div id="editor">
  <h2>Demo Content</h2>
  <p>Preset build with <code>snow</code> theme, and some common formats.</p>
</div>

<script>
  const quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

核心构建

¥Core Build

要完全自定义你的 Quill 构建，你可以导入核心库并仅添加所需的格式和模块。

¥To fully customize your Quill build, you can import the core library and add only the formats and modules you need.

<link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/quill/2.0.0-dev.4/quill.core.css" rel="stylesheet">
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/quill/2.0.0-dev.4/quill.core.js"></script>

<div id="editor">
  <p>Core build with no theme, formatting, non-essential modules</p>
</div>

<script>
  const quill = new Quill('#editor');
</script>

CDN 构建将 Quill 暴露给全局 window 对象。Quill 提供了一种 import() 方法，用于访问 Quill 库的组件，包括其格式、模块或主题。

¥CDN builds expose Quill to the global window object. Quill provides an import() method for accessing components of the Quill library, including its formats, modules, or themes.

npm

如果你的项目使用 Webpack 或 Vite 等打包工具，建议通过 npm 安装 Quill。

¥If your project uses bundlers such as Webpack or Vite, it's recommended to install Quill via npm.

npm install quill@2.0.3

与 CDN 方法类似，你可以从 "quill" 导入完整版本，也可以从 "quill/core" 导入核心版本。

¥Similar to the CDN approach, you can import the full build from "quill" or the core build from "quill/core".

import Quill from 'quill';
// Or if you only need the core build
// import Quill from 'quill/core';

const quill = new Quill('#editor');

Quill.import() 也可用于 npm 构建以访问 Quill 的库。但是，在 npm 环境中，更自然的方法是直接导入格式和模块。

¥Quill.import() is also available for the npm build to access Quill's library. However, a more natural approach in npm enviroment is to import the formats and modules directly.

import Quill from 'quill';
// Or if you only need the core build
// import Quill from 'quill/core';

import { Delta } from 'quill';
// Or if you only need the core build
// import { Delta } from 'quill/core';
// Or const Delta = Quill.import('delta');

import Link from 'quill/formats/link';
// Or const Link = Quill.import('formats/link');

样式

¥Styles

Quill 的 npm 包也附带了核心和主题的样式表，就像 CDN 构建一样。这些样式表位于 dist 目录中。

¥Quill's npm package also comes with the stylesheets for the core and themes, just like the CDN build. Those stylesheets live in the dist directory.

如果你已正确设置打包器，则可以将它们导入 JavaScript 文件中。

¥You can import them in your JavaScript files if you have a proper bundler setup.

import "quill/dist/quill.core.css";

有关在 webpack 项目中使用 Quill 的示例项目，请参阅 webpack-example。

¥Refer to webpack-example for a sample project that uses Quill in a webpack project.