共计 3368 个字符，预计需要花费 9 分钟才能阅读完成。
本文由体验技术团队 TinyVue 组件库核心成员曾令卡同学编写。
Quill 是一款 API 驱动、反对格局和模块定制的开源 Web 富文本编辑器，目前在 GitHub 的 Star 数是 38k。
本文是一个 Quill 的综合案例，从自定义工具栏按钮，到自定义 Blot 编辑器内容格局，再到调用 Quill 实例的 insertEmbed 办法，实现在富文本编辑器中插入由 Canvas 绘制的龙。
之前在掘金看到一篇文章：《产品经理：你能不能用 div 给我画条龙？》
于是突发奇想：是否把这条龙插入到富文本编辑器中呢？
之前给大家分享了如何在 Quill 中插入自定义的内容，咱们一起来回顾下：
- 第一步：自定义工具栏按钮
- 第二步：自定义 Blot 内容
- 第三步：在 Quill 注册自定义 Blot
- 第四步：调用 Quill 的 API 插入自定义内容
如果对 Quill 想要有更多的理解可参考以下几篇文章：
- 深入浅出 Quill 系列之应用篇 1：Quill 根本应用和配置
- 深入浅出 Quill 系列之应用篇 2：通过 Quill API 实现对编辑器内容的齐全管制
- 深入浅出 Quill 系列之原理篇 1：古代富文本编辑器 Quill 的模块化机制
- 深入浅出 Quill 系列之原理篇 2：古代富文本编辑器 Quill 的内容渲染机制
接下来咱们试着依照这个步骤来将龙插入到编辑器中。
第一步：自定义工具栏按钮
这个非常简单：
const TOOLBAR_CONFIG = [[{ header: ['1', '2', '3', false] }],
['bold', 'italic', 'underline', 'link'],
[{list: 'ordered'}, {list: 'bullet'}],
['clean'],
['card', 'divider', 'emoji', 'file', 'tag'],
['dragon'], // 新增的
];自定义工具栏按钮图标：
const dragonIcon = `<svg>...</svg>`;
const icons = Quill.import('ui/icons');
icons.dragon = dragonIcon;减少工具栏按钮事件：
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: {
container: TOOLBAR_CONFIG,
handlers: {
...
// 减少一个空的事件
dragon(value): void {console.log('dragon~~');
},
},
}
},
});第二步：自定义 Blot 内容（外围）
之前的分享提到：Quill 中的 Blot 就是一个一般的 ES6 Class
因而咱们须要编写一个类。
dragon.ts
import Quill from 'quill';
const BlockEmbed = Quill.import('blots/block/embed');
class DragonBlot extends BlockEmbed {
static blotName = 'dragon';
static tagName = 'canvas';
static create(value): any {const node = super.create(value);
const {id, width, height} = value;
node.setAttribute('id', id || DragonBlot.blotName);
if (width !== undefined) {node.setAttribute('width', width);
}
if (height !== undefined) {node.setAttribute('height', height);
}
// 绘制龙的逻辑，参考大帅老师的文章：https://juejin.cn/post/6963476650356916254
new Dragon(node);
return node;
}
}
export default DragonBlot;绘制龙的逻辑参考大帅老师的文章，这里就不贴代码了，大帅老师的文章里有源码，间接拿来用就能够：https://juejin.cn/post/6963476650356916254
须要留神的是大帅老师文章里的龙图片背景不是纯黑的，须要换一张纯黑的图片。
第三步：在 Quill 注册自定义 Blot
有了 DragonBlot，还须要将其注册到 Quill 中能力应用：
import DragonBlot from './formats/dragon';
Quill.register('formats/dragon', DragonBlot);第四步：调用 Quill 的 API 插入自定义内容
见证奇观的时刻到了！
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: {
container: TOOLBAR_CONFIG,
handlers: {
...
dragon(value): void {console.log('dragon~~');
const index = this.quill.getSelection().index;
// 插入自定义内容
this.quill.insertEmbed(index, 'dragon', {id: 'canvas-dragon',});
},
},
}
},
});效果图：
总结：
本文是一个 Quill 的综合案例，从自定义工具栏按钮，到自定义 Blot 编辑器内容格局，再到调用 Quill 实例的 insertEmbed 办法，实现在富文本编辑器中插入由 Canvas 绘制的龙这种简单的自定义内容。
对于 OpenTiny
OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库，蕴含基于 Angular+TypeScript 的 TinyNG 组件库，领有灵便扩大的低代码引擎 TinyEngine，具备主题配置零碎 TinyTheme / 中后盾模板 TinyPro/ TinyCLI 命令行等丰盛的效率晋升工具，可帮忙开发者高效开发 Web 利用。
欢送退出 OpenTiny 开源社区。增加微信小助手：opentiny-official 一起参加交换前端技术～更多视频内容也可关注 B 站、抖音、小红书、视频号
OpenTiny 也在继续招募贡献者，欢送一起共建
OpenTiny 官网：https://opentiny.design/
OpenTiny 代码仓库：https://github.com/opentiny/
TinyVue 源码：https://github.com/opentiny/tiny-vue
TinyEngine 源码：https://github.com/opentiny/tiny-engine
欢送进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~
如果你也想要共建，能够进入代码仓库，找到 good first issue 标签，一起参加开源奉献~
