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

本文由体验技术团队 TinyVue 组件库核心成员曾令卡同学编写。

Quill 是一款 API 驱动、支持格式和模块定制的开源 Web 富文本编辑器，目前在 GitHub 的 Star 数是 38k。

本文是一个 Quill 的综合案例，从自定义工具栏按钮，到自定义 Blot 编辑器内容格式，再到调用 Quill 实例的 insertEmbed 方法，完成在富文本编辑器中插入由 Canvas 绘制的龙。

之前在掘金看到一篇文章：《产品经理：你能不能用 div 给我画条龙？》

于是突发奇想：能否把这条龙插入到富文本编辑器中呢？

之前给大家分享了如何在 Quill 中插入自定义的内容，我们一起来回顾下：

第一步：自定义工具栏按钮
第二步：自定义 Blot 内容
第三步：在 Quill 注册自定义 Blot
第四步：调用 Quill 的 API 插入自定义内容

如果对 Quill 想要有更多的了解可参考以下几篇文章：

接下来我们试着按照这个步骤来将龙插入到编辑器中。

第一步：自定义工具栏按钮

这个非常简单：

js 复制代码

const TOOLBAR_CONFIG = [
    [{ header: ['1', '2', '3', false] }],
    ['bold', 'italic', 'underline', 'link'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['clean'],
    ['card', 'divider', 'emoji', 'file', 'tag'],
    ['dragon'], // 新增的
  ];

自定义工具栏按钮图标：

js 复制代码

const dragonIcon = `<svg>...</svg>`;
const icons = Quill.import('ui/icons');
icons.dragon = dragonIcon;

增加工具栏按钮事件：

js 复制代码

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

js 复制代码

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;

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

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

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

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

js 复制代码

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

第四步：调用 Quill 的 API 插入自定义内容

见证奇迹的时刻到了！

js 复制代码

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 官网：opentiny.design/
OpenTiny 代码仓库：github.com/opentiny/
TinyVue 源码：github.com/opentiny/ti...
TinyEngine 源码： github.com/opentiny/ti...

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~