如何将龙插入到编辑器中?

举报
Kagol 发表于 2021/06/07 18:21:46 2021/06/07
【摘要】 如何将龙插入到编辑器中?

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

Kagol.png

引言

之前在掘金看到一篇文章

《产品经理:你能不能用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',
          });
        },
      },
    }
  },
});

效果图:

插入龙.gif

欢迎加DevUI小助手微信:devui-official,一起讨论富文本编辑器技术和前端技术。

欢迎关注我们DevUI组件库,点亮我们的小星星🌟:

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

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

加入我们

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

文/DevUI Kagol

往期文章推荐

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

《如何解决异步接口请求快慢不均导致的数据错误问题?》

《Quill的模块化机制》

《Quill的内容渲染机制》

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。