Realize complete control of editor content through Quill API (with the realization of search and replace function)

DevUI is an open source front-end solution for enterprise middle and back-end products. It advocates immersion, flexibility, and 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!

The following articles are related to this article, and you may also like:

"Modular Mechanism of Modern Rich Text Editor Quill"

"Practice of Quill Rich Text Editor"

"How to insert the dragon into the editor? 》

"Today is Children's Day, let's play the whole snake in the editor"

"Modern Rich Text Editor Quill's Content Rendering Mechanism"

"Quill Basic Usage and Configuration"

`introduction`

This is the second in the Quill series.

Last article We introduced the basic usage and configuration of Quill, I believe you can use Quill to build a simple rich text editor.

However, the actual business scenarios may be more complex and require more customization. Can Quill meet them?

Quill is an API-driven rich text editor. Its content can be fully controlled through API. Let's take a look.

`1 Control of content`

The most basic operation is the rich text editor for content add / delete / change / investigation, such as:

Add some text somewhere in the editor
Select part of the content in the editor and delete it
Select a part of the text and add a certain format to it
Get part of the content and convert it

The above operations are easy to operate directly through the keyboard and mouse, but how to achieve it through API?

`1.1 Delete`

First look deleted part of deleteText() , which is implemented by the 060d9181f3c3be method, which has two main input parameters:

Where to delete index from
length how much content to delete

For example, I want to delete the Hello

this.quill.deleteText(0, 6);

For another example, I want to delete all the content in the editor, but we don't know how much content there is in it. Do we need to count them one by one?

In fact, it is not necessary. Quill provides a method to query the total number of characters in the editor getLength() ( will also be mentioned later).

It's easy to delete everything:

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

There is also a common situation, that is, we want to delete the selected content in the editor. How can this be achieved?

Quill provides a method to get the editor selection getSelection() ( control of the selection later), which can be easily achieved:

// 获取选区内容所在的index和length
const { index, length } = this.quill.getSelection();

this.quill.deleteText(index, length);

Is it very convenient?

`1.2 Check`

at the part checked by 160d9181f3c66c again, Quill hosts all the content in the editor, so it knows the content inside. Quill knows:

What's in the specified location
How much content
What is its format

You can use the getText() method to get the plain text content, and its use is similar to deleteText() and removeFormat()

// 获取指定位置的文本
this.quill.getText(0, 6);

// 不传入任何参数，可以获取全部文本
this.quill.getText();

// 获取选中文本
const { index, length } = this.quill.getSelection();
this.quill.getText(index, length);

You all know what content is, and it’s easy to get the length of the content:

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

Quill provides a convenient method getLength() , you can directly get the length of the entire text:

const length = this.quill.getLength();

To get the length of the selected text, you can use the getSelection() method introduced before:

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

`1.3 Increase`

`1.3.1 Insert text`

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

This method can increase both plain text and formatted text.

To insert plain text, you need to pass in two parameters:

index where to insert the text
text what text to insert

this.quill.insertText(0, 'DevUI 是一款面向企业中后台产品的开源前端解决方案');

Inserting formatted text requires two additional parameters:

format name of the format
value in value format

For example, I want to insert a DevUI with a hyperlink behind 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`

I believe everyone is familiar with the method of inserting embedded content insertEmbed()

"Practice of Quill Rich Text Editor"
"How to insert the dragon into the editor? 》
"Today is Children's Day, let's play the whole snake in the editor" This API has been used many times in three articles.

The difference between this method and insertText() is that there is no second parameter because it does not need to insert text.

For example, insert a dividing line in station B style:

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

For example, insert a dragon:

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

For example, insert a 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 of these methods are adding text based on existing content.

If you want to directly replace the existing text with new content, what should you do?

Use the following two set methods:

setText set plain text
setContents set formatted text

setText() method has only one parameter:

text The plain text to be inserted

this.quill.setText('Hello DevUI!');

If the text parameter is passed in an empty string, the editor content will be cleared:

this.quill.setText('');

`1.3.4 Replace existing content with delta data`

setContents() method is very powerful and can use the specified delta data to render the content of the editor.

For example, we want to turn the current rich text content into a snake game:

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

Generally, delta data will be stored in the database. This method can be used when delta is used to initialize the content of the editor.

`1.4 Change`

setContents() method has a brother called updateContents() , both of which are very capable.

updateContents() method can use delta to update the specified content in the editor.

For example, I want to change the selected Quill content to DevUI and add a hyperlink. Without using the updateContents() method, we need to call multiple methods:

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

Let's take a look at how to use the updateContents() method:

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

The effect of the two methods is the same, but the latter only needs to call one method.

updateContents() method allows us to manipulate the content of the editor by manipulating the JSON data of delta, instead of manually calling the API to change the content. In some scenarios, this will be a great convenience.

`2 Control of format`

`2.1 Delete`

In addition to deleting the editor content, we may also need to clear the format of a certain part of the content. To clear the format, you can use the removeFormat() method. The usage of this method is deleteText() , so I won’t repeat it.

// 清除指定位置和长度的文本的格式
this.quill.removeFormat(0, 6);

// 清除全部文本的格式
this.quill.removeFormat(0, this.quill.getLength());

// 清除选中文本的格式
const { index, length } = this.quill.getSelection();
this.quill.removeFormat(index, length);

`2.2 Check`

`Get a single format`

getText() method can only get the plain text, and I don’t know what format it contains. If you want to get the format of the specified text, you can use the getFormat() method. The usage is the same.

// 获取选中文本的格式
const { index, length } = this.quill.getSelection();
const format = this.quill.getFormat(index, length);

For example, the bold format:

{ bold: true }

The format of the hyperlink:

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

`Get Delta format`

However, the getFormat() method can only get a single format. If you want to know all the format information of the specified content, you need to use a more powerful API: getContents() . This method can get the delta form of the content, and the delta format not only describes what content is. It also describes the format of these contents.

For example, the content selected below, let's see what its content and format are.

Call the getContents() method:

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

The following information is printed:

{
  ops: [
    { insert: '删除内容' },
    { attributes: { header: 2 }, insert: '\n' }, // 标题二格式
    { insert: '先看' },
    { attributes: { code: true }, insert: '删' }, // 行内代码格式
    { insert: '的部分，通过' },
    { attributes: { code: true }, insert: 'deleteText()' }, // 行内代码格式
    { insert: '方法实现，该方法主要有两个入参：\nindex 从哪儿删除' },
    { attributes: { list: 'bullet' }, insert: '\n' }, // 无序列表格式
    { insert: 'length 删除多少内容' },
    { attributes: { list: 'bullet' }, insert: '\n' }, // 无序列表格式
    { insert: '比如我想把下面的' },
    { attributes: { code: true }, insert: 'Hello ' }, // 行内代码格式
    { insert: '删除：\nthis.quill.deleteText(0, 6);' },
    { attributes: { 'code-block': true }, insert: '\n' }, // 代码块格式
    { insert: '\n' }
  ]
}

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

deleted content is title 2 format
deleted / deleteText() / Hello is the inline code format
index where to delete and length to delete how much content is in unordered list format
this.quill.deleteText(0, 6); is the code block format
All other content is in plain text format

Is it clear at a glance?

`2.3 Increase`

In addition to deleting and searching for the format, you can also set the format. Quill provides 3 ways to set the format:

format(format, value) Set the format of the selected text
formatLine(index, length, format, value) Set navigation format
formatText(index, length, format, value) Set text format

// 设置选中文本为粉色
this.quill.format('color', 'pink');

// 设置第10-20个字符为粉色
this.quill.formatText(10, 10, 'color', 'pink');

// 设置第一行为有序列表
this.quill.formatLine(0, 1, 'list', 'ordered');

`3 Control over the constituency`

`3.1 Check`

`3.1.1 Query selection information`

getSelection() get the current selection or cursor, we have used it many times before, indicating that this method is a very practical high-frequency method.

This method does not need to pass in parameters, and returns the current selection information:

index The starting position of the selection
length selection length

{
  index: 0,
  length: 3
}

If there is only a cursor and no selection is made, the returned length is 0 .

If the editor has no cursor, return null .

`3.1.2 The relative positioning position of the query text`

In addition to querying the location and length of the selection, you can also use the getBounds() method to query the relative positioning of the text at the specified location in the editor container. This method has two input parameters:

index The starting position of the selection
length selection length

For example, I want to see the position of the three characters at the beginning of the editor:

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

Return result:

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

`3.2 Increase`

In addition to viewing the current selection information, we can also use the setSelection() method to manually set the selection and cursor position. This method has two parameters:

index The starting position of the selection
length selection length

If only the first parameter is set, only the cursor position will be set, and the text will not be selected:

// 将光标定位到第10个字符后面
this.quill.setSelection(10);

Setting two parameters at the same time will select the text:

// 选中第1到10个字符
this.quill.setSelection(0, 10);

Selection and cursor are the basis of subsequent operations, so this method getSelection() method, which is a very common method.

`4 summary`

We make a simple summary:

Control of content
- Delete content deleteText(index, length)
- Find content getText(index, length)
- Get the editor content length getLength()
- Insert text content insertText(index, text, format, value)
- Insert embedded content insertEmbed(index, format, value)
- Replace content with plain text setText(text)
- Replace existing content with delta data setContents(delta)
- Update content with delta updateContents(delta)
Control over format
- Remove format removeFormat(index, length)
- Find a single format getFormat(index, length)
- Get the Delta format getContents(index, length)
- Set the format of the selected text format(format, value)
- Set the line format formatLine(index, length, format, value)
- Set text format formatText(index, length, format, value)
Control over the constituency
- Get selection/cursor information getSelection()
- Get the relative positioning of the specified text getBounds(index, range)
- Set selection/cursor getSelection(index, range)

`5 Case: Find and replace function`

Finally, we use a search and replace case to review the API introduced before.

// 待查找文本
const str = 'Quill';
const length = str.length;

// 匹配目标文本的正则
const reg = new RegExp(str, 'g');

let match;
while ((match = reg.exec(this.quill.getText())) !== null) {
  // 目标文本在文档中的位置
  const index = match.index;
  
  // 匹配到目标文本之后，我们可以对该文本做高亮或替换的处理
  
  // 高亮
  this.quill.formatText(index, length, 'background', '#ef0fff');
  
  // 替换
  this.quill.deleteText(index, length);
  this.quill.insertText(index, 'DevUI', 'link', 'https://devui.design/');
}

`summary`

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

Later, I will introduce more about Quill's practice, and focus on DevUI not to get lost 🦌.

Welcome to add DevUI assistant WeChat: devui-official to discuss Angular technology and front-end technology together.

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, just 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