将Quill添加到项目构建管道中 — Quill富文本编辑器快速入门中文文档

上一节内容请查看：如何自定义或定制Quill？

Quill的安装可使用NPM或其CDN，不过你可能希望从源代码构建Quill，作为应用程序构建管道的一部分。使用预先构建的版本是使用Quill的最简单方法，这里的Quill是使用Webpack构建的。

在quill-webpack-example中可以找到本指南中所有内容的最小工作示例。

一、webpack

你需要将Webpack和适当的加载器作为开发依赖项添加到你的应用程序中。如果你想从源代码构建Parchment，那么Typescript编译器也是必须的。

1. Quill源代码- babel-core, babel-loader, babel-preset-es2015
2. Parchment源代码- ts-loader, typescript
3. SVG图标- html加载器

你的Webpack配置文件还需要别名Quill和Parchment来指向它们各自的入口源文件。若没有这个Webpack将使用NPM中包含的预构建文件，而不是从源代码构建。

二、Quill入口

Quill与Quill.js和Quill.core.js一起发布，你可能希望在应用程序中有一个类似的入口点，该入口点只包含你使用的格式、模块或主题。

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';

Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});

export default Quill;

三、CSS样式表

在样式表领域从源代码构建没有那么多好处，因为规则很容易被覆盖。但是css-loader的tilde前缀可能有助于在应用程序的css文件中包含Quill样式。

@import "~quill/dist/quill.core.css"

// 重置你的应用程序的CSS