Practice of Quill Rich Text Editor-DevUI

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

introduction

The rich text editor is probably the most complex, yet extremely versatile component.

It can be said that the rich text editor makes Web data entry full of unlimited imagination. If there are only text boxes, drop-down boxes and other plain text data entry components, then the data entry capabilities of the Web will be greatly limited. We will not be able to insert rich text content such as pictures and videos on web pages, let alone insert custom content.

The rich text editor makes web content editing easier and more efficient. We can insert almost any content you want to insert in the rich text editor, pictures, videos, hyperlinks, formulas, code blocks, etc., You can even insert super-complex custom content such as tables, PPT, mind maps, and even 3D models.

The scene of the rich text editor can be seen everywhere on the Web. You need to use rich text to write articles, write comments, feedback, and record demand orders.

This article combines the practice of the DevUI team in the rich text component, from the usage scenarios, technology selection, to the extension of Quill, and the basic principles of Quill, to share with you those things about the Quill rich text editor.

This article mainly consists of the following parts:

1. Use scenarios of rich text editor
2. Technology selection
3. Why we choose Quill
4. How to extend Quill
5. Quill basic principles

The following comes from Kagol in speech on Huawei HWEB large front-end technology sharing session.

Use scenarios of rich text editor

• Blog post
• Wiki entry
• Work item description
• Test case steps
• Feedback
• comment
• …

Technology selection

Our needs:

• Open source protocol friendly
• Angular framework or framework independent
• Flexible and expandable
• Support inserting/editing tables and pictures
• Rich plug-ins, good ecology

Selection analysis

• UEditor not officially maintained
• Draft.js and Slate exclusive to the React framework
• Then exclude the unfriendly CKEditor
• Due to enrich our business scenario, you need rich text Insert / edit function table, so it does not need to rule out support tables Trix , weak support table Etherpad and Prosemirror , and spreadsheet functionality charges TinyMCE
• Finally, only Quill and wangEditor two editors Alternatively, wangEditor scalability and ecological inferior Quill , so chose Quill base as a rich text component

Why choose Quill?

• BSD agreement, business friendly
• Detailed documentation, quick to get started
• API driven, good scalability
• Rich plug-ins, good ecology

Document details

Document：https://quilljs.com/

Introduce Quill's API:

Introduce how to extend Quill:

Get started quickly

• Install Quill: npm i quill
• Introducing style: @import 'quill/dist/quill.snow.css';
• Introducing Quill: import Quill from 'quill';
• Initialize Quill: new Quill('#editor', { theme: 'snow' });

Effect picture:

API driven, good scalability

Rich plug-ins, good ecology

Extend Quill

Insert label

For example, I want to insert a tag in the editor

Upload Attachment

For example, I want to insert an attachment in the editor

Insert emoticon

For example, I want to insert emoticons in the editor

Comments on similar words: https://www.yuque.com/yuque/blog/sguhed

Personality dividing line

For example, I want to insert a personalized dividing line like station B

Hyperlink card

For example, I want to insert a hyperlink card like Zhihu

How to insert emoticons?

Let's start with how to insert emoticons, and take a look at how to insert custom content in Quill.

To insert emoticons in Quill, you only need the following four steps:

• Step 1: Customize toolbar buttons
• Step 2: Customize Blot content EmojiBlot
• Step 3: Register EmojiBlot at Quill
• Step 4: Call Quill's API to insert emoticons

Step 1: Customize toolbar buttons

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    // 配置工具栏模块
    toolbar: {
      container: [ …, [ 'emoji' ] ], // 增加一个按钮
      handlers: {
        // 添加按钮的处理逻辑
        emoji() {
          console.log('插入表情');
        }
      }
    },
  }
});

Add icons to toolbar buttons

// 扩展Quill内置的icons配置
const icons = Quill.import('ui/icons');
icons.emoji = ‘<svg>…</svg>’; // 图标的svg可以从iconfont网站复制

The effect is as follows:

There is already an emoticon button on the toolbar, and it can respond to mouse click events. The next step is to
Write specific logic for inserting emoticons, which involves knowledge of Quill’s custom content.

Step 2: Customize Blot content EmojiBlot

The Blot in Quill is an ordinary ES6 Class, because the difference between the expression and the picture is:

Quill's built-in picture format does not support custom width and height, and the emoji we want to insert requires a specific width and height.

So we can expand based on Quill's built-in image format.

emoji.ts

import Quill from 'quill';

const ImageBlot = Quill.import('formats/image');

// 扩展Quill内置的image格式
class EmojiBlot extends ImageBlot {
  static blotName = 'emoji'; // 定义自定义Blot的名字（必须全局唯一）
  static tagName = 'img'; // 自定义内容的标签名

  // 创建自定义内容的DOM节点
  static create(value): any {
    const node = super.create(value);
    node.setAttribute('src', ImageBlot.sanitize(value.url));
    if (value.width !== undefined) {
      node.setAttribute('width', value.width);
    }
    if (value.height !== undefined) {
      node.setAttribute('height', value.height);
    }
    return node;
  }
  
  // 返回options数据
  static value(node): any {
    return {
      url: node.getAttribute('src'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height')
    };
  }
}

export default EmojiBlot;

Step 3: Register EmojiBlot at Quill

With EmojiBlot, to insert it into the Quill editor, you also need to register this ES6 class in Quill.

import EmojiBlot from './formats/emoji';
Quill.register('formats/emoji', EmojiBlot);

Step 4: Call Quill's API to insert emoticons

After EmojiBlot is registered in Quill, Quill can recognize it, and you can call Quill's API to insert it into the editor.

emoji(): void {
  console.log(‘插入表情');
  // 获取当前光标位置
  const index = this.quill.getSelection().index;
  // 在当前光标处插入emoji（blotName）
  this.quill.insertEmbed(index, 'emoji', {
    url: 'assets/emoji/good.png',
    width: '64px',
  });
},

Effect picture

Demo source code

Source link: https://gitee.com/kagol/quill-demo

Also welcome to pay attention to the official website of our DevUI component library to learn more interesting and practical open source components!

DevUI official website: https://devui.design

Quill basic principles

Finally, talk about the basic principles of Quill.

Fundamental

• Use Delta data model to describe rich text content and its changes to ensure predictable behavior
• Abstract the DOM through Parchment to ensure platform consistency
• Monitor the changes of DOM nodes through Mutation Observe, and synchronize the changes of DOM to the Delta data model

How does Quill express the editor content?

Delta data model

Describe rich text content and its changes through the Delta data model

Delta is a subset of JSON and contains only one ops property. Its value is an array of objects. Each array item represents an operation on the editor (based on the initial state of the editor being empty).

{
  "ops": [
    { "insert": "Hello " },
    { "insert": "World", "attributes": { "bold": true } },
    { "insert": "\n" }
  ]
}

Modify editor content

For example, if we change the bold "World" to the red text "World", this action is described by Delta as follows:

{
  "ops": [
    { "retain": 6 },
    { "retain": 5, "attributes": { "color": "#ff0000" } }
  ]
}

It means: keep the first 6 characters of the editor, that is, keep "Hello" intact, keep the next 5 characters "World", and set these characters as the font color "#ff0000".

Delete editor content

What if you want to delete "World"?

{
  "ops": [
    { "retain": 6 },
    { "delete": 5 }
  ]
}

That is: keep the first 6 characters ('Hello'), delete the next 5 characters ('World')

How does Quill render content?

The basic principles of rendering rich text content:
Traverse the Delta array and apply (insert/format/delete) the content described in it to the editor one by one.

For details, please refer to the DevUI column:

"Quill's Content Rendering Mechanism"

How does Quill extend the capabilities of the editor?

Ways to extend Quill:

• Expand the content of the editor by customizing the Blot format
• Extend the editor's functionality through custom modules

For details, please refer to the DevUI column:

"Modular Mechanism of Modern Rich Text Editor Quill"

THANK YOU！