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

原创
02/19 17:49
阅读数 535

本文由体验技术团队 TinyVue 组件库核心成员曾令卡同学编写。
Quill 是一款 API 驱动、支持格式和模块定制的开源 Web 富文本编辑器,目前在 GitHub 的 Star 数是 38k。

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

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

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

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

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

如果对 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🌟TinyEngineTinyVueTinyNGTinyCLI~ 如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部