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分鐘搭建一個美觀大氣的後臺管理系統！