DevUI 是一款面向企业中后盾产品的开源前端解决方案，它提倡沉迷、灵便、至简的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的抉择！

以下文章和本文相干，兴许你也会喜爱：

《古代富文本编辑器Quill的模块化机制》

《Quill富文本编辑器的实际》

《如何将龙插入到编辑器中？》

《明天是儿童节，整个贪吃蛇到编辑器里玩儿吧》

《古代富文本编辑器Quill的内容渲染机制》

引言

之前在HWEB大前端技术分享会上给大家分享过 Quill 的一些实际，不过因为工夫关系只讲了个大略，后续打算深入浅出地对 Quill 做一个具体的介绍。

这个系列打算从实际的角度去讲 Quill 富文本编辑器，先从 Quill 的根本应用开始吧！

极简形式应用 Quill

疾速开始三部曲：

装置
引入
应用

// 装置npm i quill

<div id="editor"></div>

// 引入import Quill from 'quill';// 应用const quill = new Quill('#editor');

尽管咱们曾经初始化了 Quill 实例，然而在页面中却什么也看不到。

尽管看上去什么也没有，然而咱们点击空白处，会发现有一个光标，并且能够输出内容，并给内容减少格局（因为没有工具栏，只能通过 Quill 快捷键Ctrl+B减少格局），以下是动画成果：

尽管只是一个极简版的富文本编辑器，不过加上边框和按钮，就是一个根底版的掘金评论框（还差插入表情和图片）

这是应用 Quill 最简略的形式。

加一些配置选项吧

配置编辑器容器元素 container

Quill 类一共有两个参数，第一个参数是必选的编辑器容器元素container，能够是一个CSS选择器，比方后面的#editor，也能够是一个DOM元素，比方：

const container = document.getElementById('editor');// const container = document.querySelector('#editor');// const container = $('#editor').get(0);const quill = new Quill(container);

如果容器外面曾经有一些 HTML 元素，那么初始化 Quill 的时候，那些元素也会渲染进去，比方：

<div id="editor">  <p>DevUI：面向企业中后盾的前端开源解决方案</p>  <h2>主旨与法令</h2>  <p>标准的组件化的目标不是为了限度发明，而是为了创造者更确定、迷信、高效。所有行为决策的价值归依是产品业务。产品业务永远比组件化自身更重要，业务第一。</p>  <p>标准不是相对、教条、冷酷、强制的，理论工作中总会有新增需要、存优化空间、情感化设计需要超出个别通用标准。放弃克服的同时，容许基于强烈业务需要的标准冲破；之后如果有足够的理由迭代出组件，那么就进行组件深入。</p>  <h2>设计语言</h2>  <p>DevUI的价值观奠定了 DevCloud品牌的根底。它是 DevCloud 的设计师们思考、工作的产物，反映了 DevCloud 的产品文化、设计理念和对客户的承诺。DevUI的这些价值观贯通于所有产品和面向客户的沟通和内容中。同时，它是 DevUI 设计准则的源头，为具体的设计办法提供启发和指引。</p>  <p>DevUI提倡<code>沉迷</code>、<code>灵便</code>、<code>致简</code>的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。</p>  <h2>致简</h2>  <p>DevUI保持以用户为核心去进行设计，重视直观可达性，把服务示例化以帮忙用户疾速融入到应用中去。同时， DevUI提供大量的快捷键，简化应用的流程、进步操作效率。</p>  <h2>沉迷</h2>  <p>DevUI的沉迷式体验包含人的感官体验和认知体验，当用户的集体技能与面对的挑战相互匹配，并且长时间处在稳固状态时，用户达到心流状态并且不易被外界因素所烦扰。</p>  <p>在产品设计中，DevUI专一在升高用户在实现工作指标时的认知阻力中。为此，DevUI同时提供多种不同的切换页面的路径，包含面包屑、快捷键、按钮和链接等，不便用户随时疾速、间断地切换页面，达到本人所需的页面，使用户处于晦涩的体验中，加重寻找信息的焦虑感。</p>  <h2>灵便</h2>  <p>DevUI提供超过60个独立原子级组件，能够自由组合，像搭积木一样，用小组件搭建出合乎本身产品须要的分子级组件，进而搭建出本人的业务零碎。</p></div>

渲染进去的编辑器成果：

配置选项 options

第二个参数是可选的配置选项options，options是一个JSON对象，比方咱们想给咱们的编辑器减少一个主题，使它不再那么枯燥。

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

另外须要引入该主题对应的款式：

@import 'quill/dist/quill.snow.css';

这时咱们看到编辑器曾经有一个工具栏。

并且能够通过工具栏对编辑器的内容进行操作，比方给DevUI减少一个超链接：

除了snow主题，Quill 还内置了一个bubble气泡主题，配置形式和snow主题一样：

引入主题款式
在options里配置主题

// 引入bubble主题款式@import 'quill/dist/quill.bubble.css';

const quill = new Quill('#editor', {  theme: 'bubble' // 配置 bubble 主题});

成果如下：

bubble主题没有显性的工具栏，它会在你选中编辑器中的文本时，在选中文本的下方显示一个气泡工具栏，从而对文本进行格式化操作，比方给选中的段落减少援用格局：

更多配置选项

Quill 不仅仅能够配置主题，options一共反对8个配置选项：

bounds 编辑器内浮框的边界
debug debug级别
formats 格局白名单
modules 模块
placeholder 占位文本
readOnly 只读模式
scrollingContainer 滚动容器
theme 主题

formats 格局白名单

这个配置项十分有用，比方刚刚提到的掘金评论框，咱们发现评论框里只能插入纯文本，其余格局都不容许，即便时粘贴进来的格式化文本也会变成纯文本。

在 Quill 里很容易实现，只须要配置formats为空数组即可。

const quill = new Quill('#editor', {  theme: 'snow',  formats: []});

留神这里的formats格局白名单，管制的是内容理论的格局，和设置格局的渠道无关，比方formats设置为空，那么无论是：

通过工具栏设置格局
还是通过快捷键（比方Ctrl+B）设置格局
抑或是粘贴带格局的文本
都是无奈设置格局的。

如果咱们想保留一部分格局，比方只保留粗体和列表两种格局：

const quill = new Quill('#editor', {  theme: 'snow',  formats: [ 'bold', 'list' ]});

Quill 一共反对11种行内格局：

background
bold
color
font
code
italic
link
size
strike
script
underline

7种块级格局：

blockquote
header
indent
list
align
direction
code-block

3种嵌入格局：

formula
image
video

不配置formats选项，会默认反对所有的21种格局。

placeholder 占位文本

咱们发现掘金的评论框在没有输出内容时，会有一个输出评论...的占位文本。

这能够很容易地通过配置placeholder选项实现。

const quill = new Quill('#editor', {  formats: [],  placeholder: '输出评论...',});

readOnly 只读模式

通过配置readOnly能够实现：

初始状态编辑器是浏览态，不能够编辑，能够通过点击编辑按钮让编辑器变成编辑态。

因为掘金的评论框不反对编辑，就不拿它举例子。

以 DevCloud 看板我的项目的评论框为例，初始状态下评论是不可编辑的，点击编辑按钮，变成可编辑状态，并且显示工具栏、保留按钮等元素，点击保留按钮，新增的内容被保留，编辑器变成只读态。

modules 模块配置

这个配置项放在最初并不代表它不重要，恰恰相反，这是 Quill 中最重量级也是最罕用的配置。

在之前的文章中，给大家介绍过 Quill 的模块化机制，这个配置项就是用来配置 Quill 的模块的。

在Quill的模块化机制一文中，咱们提到

Quill 一共有6个内置模块：

Clipboard 粘贴版
History 操作历史
Keyboard 键盘事件
Syntax 语法高亮
Toolbar 工具栏
Uploader 文件上传

每个模块的用处详见Quill内置模块章节。

modules选项能够用来配置这些模块。

配置 toolbar 模块

Quill 默认只在工具栏中显示一部分格式化按钮，外面没有插入图片的按钮，咱们能够通过配置toolbar模块来减少。

const quill = new Quill('#editor', {  theme: 'snow',  modules: {    toolbar: [      // 默认的      [{ header: [1, 2, 3, false] }],      ['bold', 'italic', 'underline', 'link'],      [{ list: 'ordered'}, { list: 'bullet' }],      ['clean'],             // 新增的      ['image']    ]  }});

如果想做一个掘金这样的富文本编辑器，也非常简单。

掘金的富文本编辑器次要蕴含以下工具栏按钮：

加粗
斜体
下划线
一级/二级题目
援用
代码块
行内代码
无序列表
有序列表
超链接
插入图片

应用 Quill 实现，须要这样配置toolbar模块。

const quill = new Quill('#editor', {  theme: 'snow',  modules: {    toolbar: [      'bold', 'italic', 'underline',       { header: 1 }, { header: 2 },      'blockquote', 'code-block', 'code', 'link',      { list: 'ordered'}, { list: 'bullet' },      'image',    ]  }});

略微批改下款式，就能做出一个和掘金富文本编辑器差不多的富文本编辑器啦，成果如下：

以下是和掘金理论的富文本编辑器的比照图：

比照以上成果比照图，除了工具栏的 icon 应用的是掘金 Markdown 编辑器的 icon 之外，其余简直是一样的。

配置 keyboard 模块

除了工具栏模块，咱们还能够配置别的模块，比方快捷键模块keyboard，keyboard模块默认反对很多快捷键，比方：

加粗的快捷键是Ctrl+B；
超链接的快捷键是Ctrl+K;
撤销/回退的快捷键是Ctrl+Z/Y。

但它不反对删除线的快捷键，如果咱们想定制删除线的快捷键，假如是Ctrl+Shift+S，能够这样配置：

const quill = new Quill('#editor', {  theme: 'snow',  modules: {    toolbar: [      // 默认的      [{ header: [1, 2, 3, false] }],      ['bold', 'italic', 'underline', 'link'],      [{ list: 'ordered'}, { list: 'bullet' }],      ['clean'],      ['image']    ],        // 新增的    keyboard: {      bindings: {        strike: {          key: 'S',          ctrlKey: true,          shiftKey: true,          handler: function(range, context) {            // 获取以后光标所在文本的格局            const format = this.quill.getFormat(range);            // 减少/勾销删除线            this.quill.format('strike', !format.strike);          }        },      }    },  }});

配置 history 模块

Quill 内置的history模块，每隔1s会记录一次操作历史，并放入历史操作栈（最大100）中，便于撤销/回退操作。

如果咱们不想记录得那么频繁，想2s记录一次，另外咱们想减少操作栈的大小，最大记录200次操作历史，能够这样配置：

const quill = new Quill('#editor', {  theme: 'snow',  modules: {    toolbar: [      // 默认的      [{ header: [1, 2, 3, false] }],      ['bold', 'italic', 'underline', 'link'],      [{ list: 'ordered'}, { list: 'bullet' }],      ['clean'],      ['image']    ],    keyboard: {      bindings: {        strike: {          key: 'S',          ctrlKey: true,          shiftKey: true,          handler: function(range, context) {            // 获取以后光标所在文本的格局            const format = this.quill.getFormat(range);            // 减少/勾销删除线            this.quill.format('strike', !format.strike);          }        },      }    },        // 新增的    history: {      delay: 2000, // 2s记录一次操作历史      maxStack: 200, // 最大记录200次操作历史    }  }});

小结

本文次要介绍了 Quill 的根本用法，以及如何通过 options 选项配置 Quill。

后续将介绍更多对于 Quill 的实际，关注 DevUI 不迷路。

欢送加DevUI小助手微信：devui-official，一起探讨Angular技术和前端技术。

欢送关注咱们DevUI组件库，点亮咱们的小星星：

https://github.com/devcloudfe/ng-devui

也欢送应用DevUI新公布的DevUI Admin零碎，开箱即用，10分钟搭建一个好看大气的后盾管理系统！

退出咱们

咱们是DevUI团队，欢送来这里和咱们一起打造优雅高效的人机设计/研发体系。招聘邮箱：muyang2@huawei.com。

文/DevUI Kagol

往期文章举荐

《Angular Schematics在DevUI Admin中的实际》

《古代富文本编辑器Quill的模块化机制》

《Quill富文本编辑器的实际》

《如何将龙插入到编辑器中？》

《明天是儿童节，整个贪吃蛇到编辑器里玩儿吧》