DevUI 是一款面向企业中后盾产品的开源前端解决方案，它提倡沉迷、灵便、至简的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的抉择！

引言

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

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

果然，这篇文章十分受欢迎，曾经半个多月过来了，仍然能在掘金首页的热门举荐里看到这篇文章

正好前两天在公司的HWEB大前端分享会上给大家分享了富文本编辑器的一些实际，于是想：

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

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

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

第一步：自定义工具栏按钮
第二步：自定义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'], // 新增的];

自定义工具栏按钮图标：

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组件库，点亮咱们的小星星：

https://github.com/devcloudfe/ng-devui

也欢送应用DevUI新公布的DevUI Admin零碎，开箱即用，10分钟搭建一个好看大气的后盾管理系统！

退出咱们

咱们是DevUI团队，欢送来这里和咱们一起打造优雅高效的人机设计/研发体系。招聘邮箱：muyang2@huawei.com。

文/DevUI Kagol

往期文章举荐

《Quill富文本编辑器的实际》

《StepsGuide：一个像跟屁虫一样的组件》

《如何解决异步接口申请快慢不均导致的数据谬误问题？》

《号外号外！DevUI Admin V1.0 公布啦！》

《让咱们一起建设 Vue DevUI 我的项目吧！》