DevUI 是一款面向企业中后盾产品的开源前端解决方案，它提倡沉迷、灵便、至简的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的抉择！
以下文章和本文相干，兴许你也会喜爱：
《古代富文本编辑器Quill的模块化机制》
《Quill富文本编辑器的实际》
《如何将龙插入到编辑器中？》
《明天是儿童节，整个贪吃蛇到编辑器里玩儿吧》
《古代富文本编辑器Quill的内容渲染机制》
《Quill根本应用和配置》
引言
这是深入浅出 Quill 系列的第2篇。
上一篇咱们介绍了 Quill 的根本应用和配置，置信大家可能应用 Quill 搭建一个简略的富文本编辑器啦。
不过理论的业务场景可能更简单，有更多定制的需要，Quill 是否满足呢？
Quill 是一款 API 驱动的富文本编辑器，它的内容能够通过API实现齐全的掌控，咱们一起来看看吧。
1 对内容的管制
富文本编辑器最根本的操作就是对内容的增/删/改/查，比方：
- 在编辑器某处减少一些文本
- 选中编辑器中的一部分内容，将其删除
- 选中一部分文本，给它增加某种格局
- 获取其中一部分内容，对其进行转换
以上操作间接通过键盘和鼠标很容易操作，然而通过 API 如何实现呢？
1.1 删
先看删的局部，通过deleteText()办法实现，该办法次要有两个入参：
- index 从哪儿删除
- length 删除多少内容
比方我想把上面的Hello 删除：
this.quill.deleteText(0, 6);又比方我想删除编辑器里的所有内容，但咱们不晓得外面一共有多少内容，是不是须要一个一个数一下呢？
其实是不须要的，Quill 提供了一个查问编辑器总字符数的办法getLength()（前面介绍查的局部也会讲到）。
所有删除所有内容也很简略：
this.quill.deleteText(0, this.quill.getLength());还有一种常见的状况，就是咱们想删除编辑器中选中的内容，这要如何实现呢？
Quill 提供了一个获取编辑器选区的办法getSelection()（前面介绍对选区的管制时会讲到）能够轻松实现：
// 获取选区内容所在的index和lengthconst { index, length } = this.quill.getSelection();this.quill.deleteText(index, length);是不是十分不便呢？
1.2 查
再来看查的局部，Quill 托管了编辑器里所有的内容，因而它对外面的内容一目了然，Quill 晓得：
- 指定地位有什么内容
- 有多少内容
- 它的格局是什么
能够应用getText()办法获取纯文本内容，它的应用形式也后面介绍过的deleteText()和removeFormat()也相似：
// 获取指定地位的文本this.quill.getText(0, 6);// 不传入任何参数，能够获取全副文本this.quill.getText();// 获取选中文本const { index, length } = this.quill.getSelection();this.quill.getText(index, length);都晓得有什么内容了，拿到内容的长度就很简略了：
const length = this.quill.getText().length;Quill 提供了一个简便的办法getLength()，能够间接拿到全副文本的长度：
const length = this.quill.getLength();要获取选中文本的长度，能够应用之前介绍过的getSelection()办法：
const length = this.quill.getSelection().length;1.3 增
1.3.1 插入文本
往编辑器里减少格式化的内容是最常见的需要，Quill 针对该场景提供了十分丰盛的 API，最根底的就是insertText()办法。
该办法即能够减少纯文本，又能够减少带格局的文本。
插入纯文本须要传入两个参数：
- index 从哪个地位插入文本
- text 插入什么文本
this.quill.insertText(0, 'DevUI 是一款面向企业中后盾产品的开源前端解决方案');插入带格局的文本须要额定传入两个参数：
- format 格局的名字
- value 格局的值
比方我想在以后光标前面插入一个带超链接的DevUI：
const range = this.quill.getSelection();if (range) { this.quill.insertText(range.index, 'DevUI', 'link', 'https://devui.design/');}1.3.2 插入嵌入内容
插入嵌入内容的办法insertEmbed()，置信大家都很相熟了，我在之前的
- 《Quill富文本编辑器的实际》
- 《如何将龙插入到编辑器中？》
- 《明天是儿童节，整个贪吃蛇到编辑器里玩儿吧》
三篇文章中屡次应用这个API。
这个办法和insertText()的区别在于没有第二个参数，因为它不须要插入文本。
比方插入B站格调的分割线：
const index = this.quill.getSelection().index;this.quill.insertEmbed(index, 'divider', { url: 'assets/images/divider.png', width: '660px',});比方插入龙：
const index = this.quill.getSelection().index;this.quill.insertEmbed(index, 'dragon', { id: 'canvas-dragon',});比方插入贪吃蛇小游戏：
const index = this.quill.getSelection().index;this.quill.insertEmbed(index, 'snake', { id: 'canvas-snake',});1.3.3 用纯文本替换现有内容
这两个办法都是在现有内容的根底上新增文本。
如果要间接用新的内容替换现有文本，要怎么做呢？
应用以下两个set办法即可：
- setText 设置纯文本
- setContents 设置带格局的文本
setText()办法只有一个参数：
- text 须要插入的纯文本
this.quill.setText('Hello DevUI!');如果text参数传入空字符串，则会清空编辑器内容：
this.quill.setText('');1.3.4 用 delta 数据替换现有内容
setContents()办法十分弱小，能够应用指定的 delta 数据来渲染编辑器的内容。
比方咱们想要将以后富文本的内容变成一个贪吃蛇游戏：
this.quill.setContents([ { insert: { snake: { id: 'snake' } } }]);个别 delta 数据会存储在数据库中，应用 delta 来初始化编辑器内容时，能够应用该办法。
1.4 改
setContents()办法还有一个兄弟叫updateContents()，这俩兄弟本事都十分强。
updateContents()办法能够应用 delta 更新编辑器中的指定内容。
比方我想把选中的Quill内容变成DevUI，并加上超链接，不应用updateContents()办法的状况下，咱们须要调用多个办法：
const { index, length } = this.quill.getSelection();this.quill.deleteText(index, length);this.quill.insertText(index, 'DevUI', 'link', 'https://devui.design/');咱们再来看看应用updateContents()办法如何实现：
this.quill.updateContents([ { retain: index }, { delete: length }, { insert: 'DevUI', attributes: { link: 'https://devui.design/' } }]);两种办法的成果一样，然而后者只须要调用一个办法。
updateContents()办法能够赋予咱们通过操作 delta 这个 JSON 数据来操作编辑器内容，而不必手动调用 API 去扭转内容，在某些场景下这将是一个极大的便当。2 对格局的管制
2.1 删
除了能够删除编辑器内容外，咱们可能还须要革除某局部内容的格局，革除格局能够应用removeFormat()办法，该办法的应用形式和deleteText()简直是一样的，不再赘述。
// 革除指定地位和长度的文本的格局this.quill.removeFormat(0, 6);// 革除全副文本的格局this.quill.removeFormat(0, this.quill.getLength());// 革除选中文本的格局const { index, length } = this.quill.getSelection();this.quill.removeFormat(index, length);2.2 查
获取繁多格局
getText()办法只能拿到纯文本，并不知道外面有什么格局，要想获取指定文本的格局，能够应用getFormat()办法，应用形式都一样。
// 获取选中文本的格局const { index, length } = this.quill.getSelection();const format = this.quill.getFormat(index, length);比方粗体的格局：
{ bold: true }超链接的格局：
{ link: "https://juejin.cn/post/6976023288753586184" }获取 Delta 格局
不过getFormat()办法只能拿到繁多的格局，如果想晓得指定内容的全副格局信息，须要应用一个更加弱小的API：getContents()，这个办法能获取内容的 delta 模式，而delta格局不仅形容了有什么内容，还形容了这些内容的格局是什么。
比方以下选中的内容，咱们看看它的内容和格局是什么。
调用getContents()办法：
const { index, length } = this.quill.getSelection();const contents = this.quill.getContents(index, length);console.log('contents:', contents);打印了以下信息：
{ ops: [ { insert: '删除内容' }, { attributes: { header: 2 }, insert: '\n' }, // 题目二格局 { insert: '先看' }, { attributes: { code: true }, insert: '删' }, // 行内代码格局 { insert: '的局部，通过' }, { attributes: { code: true }, insert: 'deleteText()' }, // 行内代码格局 { insert: '办法实现，该办法次要有两个入参：\nindex 从哪儿删除' }, { attributes: { list: 'bullet' }, insert: '\n' }, // 无序列表格局 { insert: 'length 删除多少内容' }, { attributes: { list: 'bullet' }, insert: '\n' }, // 无序列表格局 { insert: '比方我想把上面的' }, { attributes: { code: true }, insert: 'Hello ' }, // 行内代码格局 { insert: '删除：\nthis.quill.deleteText(0, 6);' }, { attributes: { 'code-block': true }, insert: '\n' }, // 代码块格局 { insert: '\n' } ]}从以上 delta 构造咱们很容易得出编辑器内容的格局信息：
删除内容是题目二格局删/deleteText()/Hello是行内代码格局index 从哪儿删除和length 删除多少内容是无序列表格局this.quill.deleteText(0, 6);是代码块格局- 其余内容都是纯文本格式
是不是高深莫测呢？
2.3 增
除了删除和查找格局之外，还能够设置格局，Quill提供了3个设置格局的办法：
- format(format, value) 设置选中文本的格局
- formatLine(index, length, format, value) 设置航行格局
- formatText(index, length, format, value) 设置文本格式
// 设置选中文本为粉色this.quill.format('color', 'pink');// 设置第10-20个字符为粉色this.quill.formatText(10, 10, 'color', 'pink');// 设置第一行为有序列表this.quill.formatLine(0, 1, 'list', 'ordered');3 对选区的管制
3.1 查
3.1.1 查问选区信息
获取以后选区或光标的办法getSelection()，咱们在后面曾经应用过屡次，阐明这个办法是一个十分实用的高频办法。
该办法不须要传入参数，返回以后选区信息：
- index 选区开始地位
- length 选区长度
{ index: 0, length: 3}如果只有光标，没有抉择抉择任何内容，则返回的length为0。
如果编辑器没有光标，则返回null。
3.1.2 查问文本绝对定位地位
除了查问选区地位和长度，还能够应用getBounds()办法查问指定地位的文本在编辑器容器中的绝对定位地位，该办法有两个入参：
- index 选区开始地位
- length 选区长度
比方我想看下编辑器结尾的三个字符的地位：
const bounds = this.quill.getBounds(0, 3);返回后果：
{ bottom: 49.100006103515625 height: 22.5 left: 18 right: 66 top: 26.600006103515625 width: 48}3.2 增
除了查看以后选区信息，咱们还能够应用setSelection()办法手动设置选区和光标地位，该办法有两个参数：
- index 选区开始地位
- length 选区长度
如果只设置第一个参数，将只设置光标地位，不选中文本：
// 将光标定位到第10个字符前面this.quill.setSelection(10);两个参数同时设置将选中文本：
// 选中第1到10个字符this.quill.setSelection(0, 10);选区和光标是后续操作的根底，所以该办法和getSelection()办法一样，是一个十分罕用的办法。
4 小结
咱们做一个简略的小结：
对内容的管制
- 删除内容 deleteText(index, length)
- 查找内容 getText(index, length)
- 获取编辑器内容长度 getLength()
- 插入文本内容 insertText(index, text, format, value)
- 插入嵌入内容 insertEmbed(index, format, value)
- 应用纯文本替换内容 setText(text)
- 用 delta 数据替换现有内容 setContents(delta)
- 用 delta 更新内容 updateContents(delta)
对格局的管制
- 删除格局 removeFormat(index, length)
- 查找繁多格局 getFormat(index, length)
- 获取 Delta 格局 getContents(index, length)
- 设置选中文本的格局 format(format, value)
- 设置行格局 formatLine(index, length, format, value)
- 设置文本格式 formatText(index, length, format, value)
对选区的管制
- 获取选区/光标信息 getSelection()
- 获取指定文本的绝对定位 getBounds(index, range)
- 设置选区/光标 getSelection(index, range)
5 案例：查找替换性能
最初咱们用一个查找替换的案例来温故下之前介绍过的 API。
// 待查找文本const str = 'Quill';const length = str.length;// 匹配指标文本的正则const reg = new RegExp(str, 'g');let match;while ((match = reg.exec(this.quill.getText())) !== null) { // 指标文本在文档中的地位 const index = match.index; // 匹配到指标文本之后，咱们能够对该文本做高亮或替换的解决 // 高亮 this.quill.formatText(index, length, 'background', '#ef0fff'); // 替换 this.quill.deleteText(index, length); this.quill.insertText(index, 'DevUI', 'link', 'https://devui.design/');}小结
本文次要介绍了 Quill 的罕用API，以及每个API的应用场景。
后续将介绍更多对于 Quill 的实际，关注 DevUI 不迷路。
欢送加DevUI小助手微信：devui-official，一起探讨Angular技术和前端技术。
欢送关注咱们DevUI组件库，点亮咱们的小星星：
https://github.com/devcloudfe/ng-devui
也欢送应用DevUI新公布的DevUI Admin零碎，开箱即用，10分钟搭建一个好看大气的后盾管理系统！
退出咱们
咱们是DevUI团队，欢送来这里和咱们一起打造优雅高效的人机设计/研发体系。招聘邮箱：muyang2@huawei.com。
文/DevUI Kagol
往期文章举荐
《Quill根本应用和配置》
《古代富文本编辑器Quill的模块化机制》
《Quill富文本编辑器的实际》
《如何将龙插入到编辑器中？》
《明天是儿童节，整个贪吃蛇到编辑器里玩儿吧》