关于前端:如何将龙插入到富文本编辑器中

本文由体验技术团队 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'], // 新增的
  ];

自定义工具栏按钮图标：

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;

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

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

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

效果图：

总结：

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