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

The rich text editor is probably the most complex and widely used component.

Rich text editors make Web data entry infinitely imaginative, and the Web’s data entry capabilities would be greatly limited if it had only plain text data entry components such as text boxes and dropdowns. We won’t be able to insert rich text content like pictures, videos, or custom content on the web.

Rich text editor to make Web content editor easier and more efficient, we can insert in the rich text editor almost anything you want to insert content, images, video, hyperlinks, formula, a code block, is a cinch, you can even insert table, PPT, mind mapping, even 3 d model of the complicated custom content.

Rich text editors are everywhere on the Web. You can write articles, write comments, give feedback, and write requests.

This article combines the DevUI team’s practice with rich text components, from usage scenarios, technology selection, to extensions to Quill, and Quill’s basic principles to share the Quill rich text editor.

This paper mainly consists of the following parts:

  1. Use scenarios for rich text editors
  2. Technology selection
  3. Why did we choose Quill
  4. How to extend Quill
  5. Quill fundamentals

The following content is from Kagol’s speech at Huawei HWEB Big front-end technology sharing conference.

Use scenarios for rich text editors

  • Blog posts
  • The Wiki entry
  • Work Item Description
  • Test case steps
  • feedback
  • comments
  • …

Technology selection

Our requirements:

  • Open source Protocol Friendly
  • Angular framework or framework independent
  • Flexible and extensible
  • Supports inserting/editing tables and images
  • Rich plug-ins, good ecology

Selection of analysis

  • First of all, exclude the ones not maintained by the authoritiesUEditor
  • Then exclude those that are exclusive to the React frameworkDraft.jsandSlate
  • Then exclude the unfriendly open source protocolsCKEditor
  • Because our business scenario is rich and requires the ability to insert/edit tables with rich text, we also need to exclude those that do not support tablesTrix, weak support for formsEtherpadandProsemirror, and the form functionTinyMCE
  • All that’s left isQuillandwangEditorTwo editors are optional,wangEditorThe expansion and ecology ofQuill“, so the final choiceQuillServes as a base for rich text components

Why Quill?

  • BSD protocol, business friendly
  • Detailed documentation, quick on the hand
  • API driven, good scalability
  • Rich plug-ins, good ecology

Document in detail

Document：quilljs.com/

Introducing the Quill API:

How to extend Quill:

The load on the

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

Effect:

API driven, good scalability

Rich plug-ins, good ecology

Extend the Quill

Insert the label

Let’s say I want to insert a tag in the editor

To upload attachments

Let’s say I want to insert an attachment into the editor

Insert the expression

Let’s say I want to insert an emoji in my editor

Similar finch’s comment: www.yuque.com/yuque/blog/…

Personality dividing line

Let’s say I want to insert station B, this personalized divider

Hyperlink card

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

How do I insert emojis?

Starting with how to insert emojis, let’s take a look at how to insert custom content into Quill.

To insert an expression into a Quill, there are only four steps:

  • Step 1: Customize toolbar buttons
  • Step 2: Customize the EmojiBlot
  • Step 3: Register EmojiBlot at Quill
  • Step 4: Call Quill’s API to insert emojis

Step 1: Customize toolbar buttons

Const quill = new quill ('#editor', {theme: 'snow', modules: {// Toolbar: {container: [..., ['emoji']], // add a button to the emoji: {// Add the button to the emoji logic () {console.log(' Insert emoji'); }}},}});Copy the code

Adds ICONS to toolbar buttons

// set const ICONS = quill.import (' UI/ICONS '); // set const ICONS = quill.import (' UI/ICONS '); The ICONS. Emoji = '< SVG >... < / SVG > '; // The icon SVG can be copied from the IconFont websiteCopy the code

The effect is as follows:

Now that the toolbar has an emoji button that responds to mouse clicks, the next step is to write the logic for inserting the emoji, which involves Quill’s knowledge of custom content.

Step 2: Customize the EmojiBlot

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

Quill’s built-in image format doesn’t support custom width and height, and the emoji we’re going to insert needs a specific width and height.

So we can extend it based on Quill’s built-in image format.

emoji.ts

import Quill from 'quill'; const ImageBlot = Quill.import('formats/image'); Class EmojiBlot extends ImageBlot {static blotName = 'emoji'; Static tagName = 'img'; 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; } static value(node): any {return {url: node.getAttribute(' SRC '), width: node.getAttribute('width'), height: node.getAttribute('height') }; } } export default EmojiBlot;Copy the code

Step 3: Register EmojiBlot at Quill

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

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

Step 4: Call Quill’s API to insert emojis

Once the EmojiBlot is registered with Quill, Quill recognizes it and can invoke Quill’s API to insert it into the editor.

Emoji (): void {console.log(' insert emoji '); // Get the current cursor position const index = this.quill.getSelection().index; This.quill.insertembed (index, 'emoji', {url: 'assets/emoji/good. PNG ', width: '64px',}); },Copy the code

rendering

The Demo source code

Source link: gitee.com/kagol/quill…

You are also welcome to visit our DevUI component library website for more interesting and useful open source components!

DevUI website: devui.design

Quill fundamentals

Finally, the basic principles of Quill.

The basic principle of

  • Use the Delta data model to describe rich text content and its variations to ensure predictable behavior
  • The DOM is abstracted through Parchment to ensure platform consistency
  • Synchronize changes to the DOM to the Delta data model by listening for changes to the DOM node with Mutation Observe

How does Quill represent editor content?

Delta data model

The Delta data model is used to describe the rich text content and its variations

Delta is a subset of JSON that contains only one OPS property, whose value is an array of objects, each of which represents an operation on the editor (based on the initial null state of the editor).

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

Modify the editor content

For example, if we change the bold “World” to red “World”, the action is described by Delta:

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

Leave the first six characters in the editor as “Hello “and the next five characters “World”, and set them to the font color “#ff0000”.

Delete editor content

What if I want to delete “World”?

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

Retain the first six characters (‘ Hello ‘) and delete the next five characters (‘ World ‘).

How does Quill render content?

The basic principle for rendering rich text content is to iterate over the Delta array and apply (insert/format/delete) the contents described in it to the editor one by one.

See the DevUI column for more details:

Quill’s Content Rendering Mechanics

How does Quill extend the editor’s capabilities?

How to extend Quill:

  • Extend the content of the editor by customizing the Blot format
  • Extend the editor’s capabilities with custom modules

See the DevUI column for more details:

Modularity in Quill, a Modern Rich Text Editor

THANK YOU!