DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。若是你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！前端

引言

5月份掘金最火的文章应该就是大帅老师的《产品经理：你能不能用div给我画条龙？》node

当时我正在一边吃饭一边刷手机，看到大帅老师在群里发的这篇文章，立马放下了筷子，当时就有预感此文必火，因而看到一半立马点了赞。git

果真，这篇文章很是受欢迎，已经半个多月过去了，依然能在掘金首页的热门推荐里看到这篇文章👍github

正好前两天在公司的HWEB大前端分享会上给你们分享了富文本编辑器的一些实践，因而想：canvas

可否把这条龙插入到富文本编辑器中呢？微信

在富文本编辑器中插入自定义内容

在以前的文章中，给你们分享了如何在Quill中插入自定义的内容，咱们一块儿来回顾下：markdown

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

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

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

这个很是简单：编辑器

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

自定义工具栏按钮图标：ide

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;
复制代码

绘制龙

绘制龙的逻辑参考大帅老师的文章，这里就不贴代码了，大帅老师的文章里有源码，直接拿来用就能够：

产品经理：你能不能用div给我画条龙？

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

第三步：在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',
          });
        },
      },
    }
  },
});
复制代码

效果图：

欢迎加DevUI小助手微信：devui-official，一块儿讨论富文本编辑器技术和前端技术。

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

github.com/devcloudfe/…

也欢迎使用DevUI新发布的DevUI Admin系统，开箱即用，10分钟搭建一个美观大气的后台管理系统！