个性化阅读
专注于IT技术分析

将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
赞(0) 打赏
未经允许不得转载:srcmini » 将Quill添加到项目构建管道中 — Quill富文本编辑器快速入门中文文档
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏