将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样式表【将Quill添加到项目构建管道中 — Quill富文本编辑器快速入门中文文档】在样式表领域从源代码构建没有那么多好处,因为规则很容易被覆盖。但是css-loader的tilde前缀可能有助于在应用程序的css文件中包含Quill样式。
@import "~quill/dist/quill.core.css"// 重置你的应用程序的CSS

    推荐阅读