如何将“龙”插入到富文本编辑器中？

本文由体验技术团队 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'], // 新增的
  ];
1
2
3
4
5
6
7
8

自定义工具栏按钮图标：

const dragonIcon = ``;
const icons = Quill.import('ui/icons');
icons.dragon = dragonIcon;
1
2
3

增加工具栏按钮事件：

const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: {
        container: TOOLBAR_CONFIG,
        handlers: {
          ...
          // 增加一个空的事件
          dragon(value): void {
            console.log('dragon~~');
          },
        },
      }
    },
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

第二步：自定义 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

绘制龙的逻辑参考大帅老师的文章，这里就不贴代码了，大帅老师的文章里有源码，直接拿来用就可以：https://juejin.cn/post/6963476650356916254

需要注意的是大帅老师文章里的龙图片背景不是纯黑的，需要换一张纯黑的图片。

第三步：在 Quill 注册自定义 Blot

有了 DragonBlot，还需要将其注册到 Quill 中才能使用：

import DragonBlot from './formats/dragon';
Quill.register('formats/dragon', DragonBlot);
1
2

第四步：调用 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',
            });
          },
        },
      }
    },
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果图：

总结：

本文是一个 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标签，一起参与开源贡献~