Devui is an open source front-end solution for backstage 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, refusing to grandstanding and eye-pleasing design. If you are developing tools for TOB, DevUI is a great choice!

You may also like the following articles related to this article:

“Modular Mechanisms of Modern Rich Text Editor Quill”

The Quill Rich Text Editor in Practice

How to Insert a Dragon into an Editor?

Today is Children’s Day. Let the whole snake play in the editor.

“Content Rendering Mechanisms in a Modern Rich Text Editor Quill”

Quill Basic Use and Configuration

The introduction

This is the second in the Quill series.

In the last article, we introduced the basic use and configuration of Quill. I believe you can use Quill to build a simple rich text editor.

However, the real business scenario may be more complex and have more customized requirements. Can Quill satisfy them?

Quill is an API-driven rich text editor whose content is completely controlled by the API. Let’s take a look at it.

1 Control of content

The most basic operation of a rich text editor is to add/delete/change/check content, such as:

  • Add some text somewhere in the editor
  • Select a section of the editor and delete it
  • Select some text and add some format to it
  • Take part of it and transform it

This is easy to do directly with the keyboard and mouse, but how do you do it through the API?

1.1 delete

Let’s start with the deleteText() method, which has two main input arguments:

  • Where do I delete index
  • Length how much content to delete

Let’s say I want to delete the following Hello:

this.quill.deleteText(0, 6);

Or if I want to delete all the contents in the editor, but we don’t know how many contents there are, do we need to count them one by one?

You don’t need to. Quill provides getLength(), a method for querying the total number of characters in the editor (also covered later in the lookup section).

So deleting everything is easy too:

this.quill.deleteText(0, this.quill.getLength());

Another common case is when we want to delete something selected in the editor. How do we do this?

Quill provides an editor selection method called getSelection(), which I’ll cover later on in the selection control section, that can be easily implemented:

Const {index, length} = this.quill.getSelection(); this.quill.deleteText(index, length);

Is it very convenient?

1.2 check

Quill hosts all the content in the editor, so it knows exactly what’s in it. Quill knows:

  • What is the content of a specified location
  • How much content
  • What is its format

You can get plain text content using the getText() method, which is used in a similar way to the deleteText() and removeFormat() methods described earlier:

// Get the text this.quill-gettext (0, 6) at the specified location; // Get the full text this.quill.gettext () without passing in any arguments; // Get the selected text const {index, length} = this.quill-getSelection (); this.quill.getText(index, length);

Now that you know what the content is, it’s easy to get the length:

const length = this.quill.getText().length;

Quill provides a handy getLength() method that can get the length of the entire text directly:

const length = this.quill.getLength();

To get the length of the selected text, use the getSelection() method described earlier:

const length = this.quill.getSelection().length;

1.3 to add

1.3.1 Insert text

Adding formatted content to the editor is the most common requirement, and Quill provides a rich API for this scenario, the most basic of which is the insertText() method.

This method can add either plain text or formatted text.

To insert plain text, you pass in two arguments:

  • Index from which position to insert text
  • What text does text insert
This.quill-insertText (0, 'Devui is an open source front-end solution for backend products in the enterprise ');

Inserting formatted text takes two additional parameters:

  • The name of the format format
  • A value in the format Value

Let’s say I want to insert a hyperlinked DevUI after the current cursor:

const range = this.quill.getSelection();
if (range) {
  this.quill.insertText(range.index, 'DevUI', 'link', 'https://devui.design/');
}

1.3.2 Insert embedded content

Inserts an embedded content method, insertBed (), which I think you’re familiar with

  • The Quill Rich Text Editor in Practice
  • How to Insert a Dragon into an Editor?
  • “Today is Children’s Day, the entire snake to play in the editor” three articles repeatedly use this API.

This method differs from insertText() in that it does not have a second argument because it does not need to insertText.

For example, insert Station B style divider:

const index = this.quill.getSelection().index;
this.quill.insertEmbed(index, 'divider', {
  url: 'assets/images/divider.png',
  width: '660px',
});

Like inserting dragons:

const index = this.quill.getSelection().index;
this.quill.insertEmbed(index, 'dragon', {
  id: 'canvas-dragon',
});

For example, insert the snake game:

const index = this.quill.getSelection().index;
this.quill.insertEmbed(index, 'snake', {
  id: 'canvas-snake',
});

1.3.3 Replace existing content with plain text

Both methods add text to existing content.

What if you want to replace existing text directly with new content?

Use the following two set methods:

  • SetText sets plain text
  • SetContents sets the formatted text

The setText() method takes only one argument:

  • Text is the plain text that needs to be inserted
this.quill.setText('Hello DevUI! ');

If the text parameter is passed an empty string, the editor content is empties:

this.quill.setText('');

1.3.4 Replace existing content with delta data

The setContents() method is very powerful and renders the contents of the editor with the specified delta data.

Let’s say we want to turn the content of the current rich text into a Snake game:

this.quill.setContents([
  { insert: { snake: { id: 'snake' } } }
]);

You can use this method when you use delta to initialize editor content, where delta data is normally stored in a database.

1.4 change

The setContents() method also has a brother called updateContents(), and both of these brothers are very talented.

The updateContents() method updates the specified content in the editor using delta.

For example, if I want to change the selected Quill content to DevUI and add the hyperlink, we need to call several methods without using the updateContents() method:

const { index, length } = this.quill.getSelection();
this.quill.deleteText(index, length);
this.quill.insertText(index, 'DevUI', 'link', 'https://devui.design/');

Let’s see how this is accomplished using the updateContents() method:

this.quill.updateContents([
  { retain: index },
  { delete: length },
  { insert: 'DevUI', attributes: { link: 'https://devui.design/' } }
]);

Both methods have the same effect, but the latter requires only one method to be called.

updateContents()The JSON method allows you to manipulate the editor content by manipulating the JSON data delta without having to manually call the API to change the content, which can be a great convenience in some scenarios.

2. Format control

2.1 delete

In addition to deleting the editor content, we might also need to clear the formatting of some of the content using the removeFormat() method, which is used in much the same way as deleteText() without further detail.

// Clear the format of the specified location and length of the text this.quill-removeFormat (0, 6); // Remove all text to this.quill-removeFormat (0, this.quill-getLength ()); Const {index, length} = this.quill.getSelection(); const {index, length} = this.quill. this.quill.removeFormat(index, length);

2.2 check

Getting a single format

The getText() method only gets the plain text and doesn’t know what format is in it. To get the format of the specified text, you can use the getFormat() method in the same way.

Const {index, length} = this.quill.getSelection(); const {index, length} = this.quill. const format = this.quill.getFormat(index, length);

For example, in bold:

{ bold: true }

The format of the hyperlink:

{ link: "https://juejin.cn/post/6976023288753586184" }

Get the format of Delta

However, the getFormat() method can only get a single format, so if you want to know the full format of the specified content, you need to use a more powerful API: GetContents (), a method that gets the delta form of the content, and the delta format describes not only what the content is, but also what the format of the content is.

Let’s take a look at the content and format of the selected item below.

Call getContents() :

const { index, length } = this.quill.getSelection();
const contents = this.quill.getContents(index, length);
console.log('contents:', contents);

The following information was printed:

{ops: [{insert: 'delete content'}, {attributes: {header: 2}, insert: '\n'}, // header format {insert: 'delete content'}, {attributes: {code: true}, insert: 'delete'}, // inline code format {insert: 'part, through'}, {attributes: {code: true}, insert: 'deleteText()'}, // inline code format {insert: 'method, this method has two main parameters: \ nIndex from where to delete'}, {attributes: {list: 'bullet'}, insert: '\n'}, // unordered list format {insert: 'length '}, {attributes: {list: 'bullet'}, insert: 'n'}, // unordered list format {insert: 'length'}, {attributes: {list: 'bullet'}, insert: 'n'}, // unordered list format {insert: 'Say I want to put the following'}, {attributes: {code: true}, insert: 'Hello '}, // inline code format {insert: '}, {attributes: {'code-block': true}, insert: '\n'}, // block format {insert: '\n' } ] }

From the above delta structure we can easily derive the format information of the editor content:

  • Delete the contentIt’s heading two format
  • delete/deleteText()/Hello Is the inline code format
  • Where do I delete indexandLength how much content to deleteIs an unordered list format
  • this.quill.deleteText(0, 6);Is the code block format
  • Everything else is in plain text format

Is it obvious?

2.3 to add

In addition to deleting and finding formats, you can also set formats. Quill provides three ways to set formats:

  • Format (format, value) sets the format of the selected text
  • FormatLine (index, length, format, value) Sets the sailing format
  • FormatText (index, length, format, value) sets the text format
// Set the selected text to pink this.quill-format ('color', 'pink'); // Set the 10-20 characters to pink this.quill.formattext (10, 10, 'color', 'pink'); // FormatLine (0, 1, 'List ',' Ordered ');

3. Control of selection

3.1 check

3.1.1 Query selection information

The method getSelection() to get the current selection or cursor, which we’ve used several times before, is a very useful, high-frequency method.

This method does not need to pass in arguments and returns information about the current selection:

  • Index selection start position
  • Length of selection
{
  index: 0,
  length: 3
}

If there is only the cursor and nothing is selected, the length returned is 0.

If the editor has no cursor, null is returned.

3.1.2 Relative positioning position of query text

In addition to querying the selection position and length, you can use the getBounds() method to query the relative positioning of the text at a specified position in the editor container, which takes two incoming arguments:

  • Index selection start position
  • Length of selection

Let’s say I want to see the position of the first three characters in the editor:

const bounds = this.quill.getBounds(0, 3);

Return the result:

Bottom: 49.100006103515625 height: 22.5 left: 18 right: 66 top: 26.600006103515625 width: 48} bottom: 49.100006103515625 height: 22.5 left: 18 right: 66 top: 26.600006103515625 width: 48}

3.2 to add

In addition to viewing the current selection information, we can also manually set the selection and cursor position using the setSelection() method, which takes two parameters:

  • Index selection start position
  • Length of selection

If only the first parameter is set, only the cursor position is set, and no text is selected:

// Position the cursor after the tenth character this.quill.setSelection(10);

Setting both parameters at the same time will select text:

// select the first through tenth characters this.quill-setSelection (0, 10);

The selection and cursor are the basis for subsequent operations, so this method, like getSelection(), is a very common method.

4 summary

Let’s make a quick summary:

  • Control over content

    • Deletetext (index, length)
    • GetText (index, length)
    • Get editor content length getLength()
    • InsertText (index, text, format, value)
    • InsertBed (index, format, value)
    • Replace content with plain text setText(text)
    • Replace existing content with delta data setContents(delta)
    • Update Contents with Delta UpdateContents (Delta)

  • Control of the format

    • RemoveFormat (Index, Length)
    • GetFormat (Index, Length)
    • GetContents (index, length)
    • Set the selected text format(format, value)
    • FormatLine (index, length, format, value)
    • Format text (index, length, format, value)

  • Control of constituencies

    • Get selection/cursor information getSelection()
    • GetBounds (Index, Range) Gets the relative positioning of the specified text
    • GetSelection (Index, Range)

Case study: find and replace function

Finally, let’s review the API we introduced earlier with a search and replace case.

// const STR = 'Quill'; const length = str.length; // Match the target text const reg = new Regexp (STR, 'g'); let match; while ((match = reg.exec(this.quill.getText())) ! == null) {const index = match.index; // Highlight this.quill-formattext (index, length, 'background', '#ef0fff'); // Highlight this.quill-formattext (index, length, 'background', '#ef0fff'); // Replace this.quill-deletetext (index, length); this.quill.insertText(index, 'DevUI', 'link', 'https://devui.design/'); }

Find the replacement animation demo effect:

summary

This article mainly introduces the common APIs of Quill and the usage scenarios of each API.

More on Quill in the future, keep an eye on DevUI not getting lost 🦌.

Welcome to the DevUI assistant WeChat: devui-official to discuss Angular technologies and front-end technologies.

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

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

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 with us to build elegant and efficient man-machine design/development system. Email :[email protected].

The text/DevUI Kagol

Past articles are recommended

Quill Basic Use and Configuration

“Modular Mechanisms of Modern Rich Text Editor Quill”

The Quill Rich Text Editor in Practice

How to Insert a Dragon into an Editor?

Today is Children’s Day. Let the whole snake play in the editor.