Quill中文文档
  • 简介
  • 文档(Document)
    • 快速开始(QuickStart)
    • 下载(Download)
    • 配置项(Configuration)
    • 格式化(Formats)
    • API
      • content
      • formatting
      • selection
      • editor
      • events
      • model
      • extension
    • Delta
    • 模块(Modules)
      • 工具栏(Toolbar)
      • 键盘(Keyboard)
      • 历史(History)
      • 剪贴板(Clipboard)
      • 格式化(Formula)
      • 语法高亮(Syntax Highlighter)
    • 主题(Themes)
  • 指南(Guides)
    • 为什么要用Quill?(Why Quill)
    • 怎么自定义Quill
    • 将Quill添加到你的构建系统
    • 构建自定义模块
    • 通过Parchment克隆Medium
    • 设计Delta的格式
    • 与其他富文本编辑器对比
    • 升级到1.0
  • 其他相关库(Other)
    • Parchment
    • 自定义总结
  • 更新日志
Powered by GitBook
On this page
  • Webpack
  • 入口(Entry)
  • 样式表(Stylesheets)
  • 例子
  1. 指南(Guides)

将Quill添加到你的构建系统

Previous怎么自定义QuillNext构建自定义模块

Last updated 5 years ago

Quill的每个版本都可以从各种源(包括或者它的)构建和使用。然而,可能会出现用户希望从源代码构建Quill的用例,这是应用构建流程的一部分。如果这个想法没有发生在你身上,请不要在意!使用预制版本是使用Quill的最简单方法。

Quill使用Webpack构建,本指南主要针对用户。但是有些原则可能会转化为其他构建环境。

本指南涵盖的所有内容的基本示例都能在中找到。

Webpack

你需要将Webpack和适当的loaders作为开发的依赖项添加到你的应用程序。如果你想从源代码生成Parchment,则Typescript编译器也是必须的。

  • Quill源码 - babel-core,babel-loader,babel-preset-es2015

  • Parchment源码 - ts-loader,typescript

  • SVG图标 - html-loader

你的Webpack配置文件还需要设置Quill和Parchment别名,来指定它们各自的入口源文件。除此之外,Webpack将使用NPM中的预建文件,而不是从源代码构建。

入口(Entry)

Quill通过构建quill.js和quill.core.js分发。构建quill.js和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;

样式表(Stylesheets)

在样式表方面从源代码构建中获益并不多,因为规则可以很容易的被覆盖。然而,css-loader的字符前缀在你的应用程序的css文件中包含Quill样式是很有用的。

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

// 重写你的css样式

例子

作为一个小示例请查看。

NPM
CDN
Webpack
quill-webpack-example
quill-webpack-wxample