DevUI is an open source front-end solution for back-end products in enterprises. It advocates the design values of immersion, flexibility and simplicity. It advocates designers to serve the real needs and design for the majority of people, and rejects the sensationalizing and eye-pleasing design. If you are developing ToB tools, DevUI is a great choice!

The introduction

One of the most popular nuggets articles in May was “Product Manager: Can You Draw me a Dragon from div?

At that time, I was having a meal while brushing the phone, saw the big handsome teacher in the group posted this article, immediately put down the chopsticks, at that time had a hunch that this article will fire, so see half immediately click like.

Sure enough, the article was very popular. More than half a month later, the article can still be seen on the nuggets’ home page in the popular recommendation 👍

Just two days ago, I shared some practices of rich text editor with you in the company’s HWEB big 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 previous article, we shared how to insert custom content into Quill. Let’s review:

  • Step 1: Customize toolbar buttons
  • Step 2: Customize the blotting content
  • Step 3: Register a custom Blot with Quill
  • Step 4: Invoke Quill’s API to insert custom content

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

Step 1: Customize toolbar buttons

This one 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 '], / / the new];Copy the code

Customize toolbar button ICONS:

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

Added toolbar button events:

const quill = new Quill('#editor', { theme: 'snow', modules: { toolbar: { container: TOOLBAR_CONFIG, handlers: { ... // Add an empty event dragon(value): void {console.log('dragon~~'); },},}},});Copy the code

Step 2: Customize the Blotting content (core)

The previous share 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); } / / draw the logic of the Dragon, reference a guard of the teacher's article: https://juejin.cn/post/6963476650356916254 new Dragon (node); return node; } } export default DragonBlot;Copy the code

Draw a dragon

Draw the dragon logic reference shuai teacher’s article, here do not stick the code, shuai teacher’s article has the source code, directly used can:

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

It should be noted that the dragon picture background in the handsome teacher article is not pure black, need to change a pure black picture.

Step 3: Register a custom Blot with Quill

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

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

Step 4: Invoke Quill’s API to insert custom content

One last step, time for a 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 ',}); },},}},});Copy the code

Effect:

Welcome to add DevUI little assistant wechat: Devui-official, together to discuss rich text editor technology and front-end technology.

Welcome to our DevUI component library and light up our little star 🌟 :

Github.com/devcloudfe/…

Also welcome to use DevUI newly released DevUI Admin system, out of the box, 10 minutes to build a beautiful atmosphere of the background management system!

Join us

We are DevUI team, welcome to come here and build elegant and efficient man-machine design/R&D system with us. Recruitment email: [email protected].

The text/DevUI Kagol

Previous article recommended

Quill Rich Text Editor in Practice

StepsGuide: A Component like a Follower

How to Resolve data Errors Caused by uneven Speed of Asynchronous Interface Requests?

DevUI Admin V1.0 released

Let’s build the Vue DevUI project!