How to insert the dragon into the editor?

DevUI is an open source front-end solution for enterprise immersion, flexibility, and simple design values. It encourages designers to serve real needs, cater to the majority of people’s design, and reject grandstanding. Eye-pleasing design. If you are developing ToB of tools products, DevUI would be a very good choice!

`introduction`

The most popular article by the Nuggets in May should be Dashuai teacher "Product Manager: Can you draw a dragon for me with a div?" 》

At that time, I was reading my phone while eating. I saw this article posted by Teacher Dashuai in the group. I immediately put down my chopsticks. At that time, I had a hunch that this article would be popular, so I saw half of it and immediately liked it.

Sure enough, this article is very popular. It has been more than half a month. You can still see this article in the popular recommendations on the Nuggets homepage.

Just two days ago, I shared some practices of the rich text editor at the company's HWEB front-end sharing meeting, so I thought:

Can you insert this dragon into a rich text editor?

`Insert custom content in the rich text editor`

In the article , I shared how to insert custom content in Quill. Let’s review it together:

Step 1: Customize toolbar buttons
Step 2: Customize Blot content
Step 3: Register custom Blot on Quill
Step 4: Call Quill's API to insert custom content

We try to follow this procedure to insert the dragon into the editor.

`Step 1: Customize toolbar buttons`

This is very simple:

const TOOLBAR_CONFIG = [
  [{ header: ['1', '2', '3', false] }],
  ['bold', 'italic', 'underline', 'link'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['clean'],
  ['card', 'divider', 'emoji', 'file', 'tag'],
  ['dragon'], // 新增的
];

Customize toolbar button icons:

const dragonIcon = `<svg>...</svg>`;
const icons = Quill.import('ui/icons');
icons.dragon = dragonIcon;

Add toolbar button event:

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: {
      container: TOOLBAR_CONFIG,
      handlers: {
        ...
        // 增加一个空的事件
        dragon(value): void {
          console.log('dragon~~');
        },
      },
    }
  },
});

`Step 2: Customize Blot content (core)`

The previous sharing mentioned:

The Blot in Quill is an ordinary ES6 Class

So we need to write a 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;

`Draw dragon`

For the logic of drawing the dragon, please refer to Mr. Dashuai’s article. The code is not posted here. The source code is included in Mr. Dashuai’s article. You can use it directly:

Product Manager: Can you draw me a dragon with div?

It should be noted that the background of the dragon picture in the Dashuai teacher's article is not pure black, you need to change to a pure black picture.

`Step 3: Register custom Blot on Quill`

With DragonBlot, you also need to register it in Quill before you can use it:

import DragonBlot from './formats/dragon';
Quill.register('formats/dragon', DragonBlot);

`Step 4: Call Quill's API to insert custom content`

The last step is the time to witness the miracle!

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',
          });
        },
      },
    }
  },
});

Effect picture:

Welcome to add DevUI assistant WeChat: devui-official to discuss rich text editor technology and front-end technology.

Welcome to follow us DevUI component library, light up our little star🌟:

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

Also welcome to use DevUI's newly released DevUI Admin system, out of the box, build a beautiful and atmospheric background management system in 10 minutes!

`join us`

We are the DevUI team, welcome to come here to build an elegant and efficient man-machine design/development system with us. Recruitment email: muyang2@huawei.com.

Text/DevUI Kagol

Recommendations of previous articles

"Practice of Quill Rich Text Editor"

"StepsGuide: a component like a

"How to solve the problem of data errors caused by the uneven speed of asynchronous interface requests? 》

"Extra the nickname! DevUI Admin V1.0 is released! 》

"Let's build the Vue DevUI project together! 》