Quill basic usage and configuration-DevUI

DevUI is an open source front-end solution for enterprise immersion, flexibility, and design values. It encourages designers to serve real needs and serve most people’s designs, 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"

introduction

Quill's practice at the HWEB big front-end technology sharing meeting before, but because of the time relationship, I only talked about it, and I intend to make a detailed introduction to Quill in a simple way.

This series intends to talk about Quill rich text editor from a practical point of view. Let’s start with the basic use of Quill!

Use Quill in a minimalist way

Quickly start the trilogy:

• installation
• Introduce
• use

// 安装
npm i quill

<div id="editor"></div>

// 引入
import Quill from 'quill';

// 使用
const quill = new Quill('#editor');

Although we have initialized the Quill instance, we can't see anything on the page.

Although it looks like nothing, but when we click on the blank space, we will find that there is a cursor, and we can enter content and add format to the content (because there is no toolbar, we can only Ctrl+B ), the following is the animation effect :

Although it is only a minimalist rich text editor, with borders and buttons, it is a basic version of the Nuggets comment box (just to insert emoticons and pictures) 😜

This is the easiest way to use Quill.

Add some configuration options

Configuration editor container element container

The Quill class has two parameters. The first parameter is the required editor container element container , which can be a CSS selector, such as the previous #editor , or a DOM element, such as:

const container = document.getElementById('editor');
// const container = document.querySelector('#editor');
// const container = $('#editor').get(0);
const quill = new Quill(container);

If there are already some HTML elements in the container, those elements will also be rendered when Quill is initialized, such as:

<div id="editor">
  <p>DevUI：面向企业中后台的前端开源解决方案</p>
  <h2>宗旨与法则</h2>
  <p>规范的组件化的目的不是为了限制创造，而是为了创造者更确定、科学、高效。所有行为决策的价值归依是产品业务。产品业务永远比组件化本身更重要，业务第一。</p>
  <p>规范不是绝对、教条、冷漠、强制的，实际工作中总会有新增需求、存优化空间、情感化设计需求超出一般通用规范。保持克制的同时，允许基于强烈业务需求的规范突破；之后如果有足够的理由迭代出组件，那么就进行组件深化。</p>
  <h2>设计语言</h2>
  <p>DevUI的价值观奠定了 DevCloud品牌的基础。它是 DevCloud 的设计师们思考、工作的产物，反映了 DevCloud 的产品文化、设计理念和对客户的承诺。DevUI的这些价值观贯穿于所有产品和面向客户的沟通和内容中。同时，它是 DevUI 设计原则的源头，为具体的设计方法提供启发和指引。</p>
  <p>DevUI倡导<code>沉浸</code>、<code>灵活</code>、<code>致简</code>的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。</p>
  <h2>致简</h2>
  <p>DevUI坚持以用户为中心去进行设计，注重直观可达性，把服务示例化以帮助用户快速融入到使用中去。同时， DevUI提供大量的快捷键，简化使用的流程、提高操作效率。</p>
  <h2>沉浸</h2>
  <p>DevUI的沉浸式体验包括人的感官体验和认知体验，当用户的个人技能与面对的挑战互相匹配，并且长时间处在稳定状态时，用户达到心流状态并且不易被外界因素所干扰。</p>
  <p>在产品设计中，DevUI专注在降低用户在完成任务目标时的认知阻力中。为此，DevUI同时提供多种不同的切换页面的途径，包括面包屑、快捷键、按钮和链接等，方便用户随时快速、连续地切换页面，到达自己所需的页面，使用户处于流畅的体验中，减轻寻找信息的焦虑感。</p>
  <h2>灵活</h2>
  <p>DevUI提供超过60个独立原子级组件，可以自由组合，像搭积木一样，用小组件搭建出符合自身产品需要的分子级组件，进而搭建出自己的业务系统。</p>
</div>

The rendered editor effect:

Configuration options

The second parameter is the optional configuration option options . Options is a JSON object. For example, we want to add a theme to our editor to make it less monotonous.

const quill = new Quill('#editor', {
  theme: 'snow'
});

In addition, the style corresponding to the theme needs to be introduced:

@import 'quill/dist/quill.snow.css';

At this time we see that the editor already has a toolbar.

And you can manipulate the content of the editor through the toolbar, such as adding a hyperlink DevUI

In addition to the snow theme, Quill also has a built-in bubble bubble theme, which is configured in the same way as the snow theme:

• Introduce theme style
• Configure the theme in options

// 引入bubble主题样式
@import 'quill/dist/quill.bubble.css';

const quill = new Quill('#editor', {
  theme: 'bubble' // 配置 bubble 主题
});

The effect is as follows:

The bubble theme has no explicit toolbar. When you select the text in the editor, it will display a bubble toolbar below the selected text to format the text, such as adding a quote format to the selected paragraph:

More configuration options

Quill can not only configure themes, options supports a total of 8 configuration options:

• bounds the bounds of the floating frame in the editor
• debug debug level
• formats format whitelist
• modules module
• placeholder text
• readOnly read only mode
• scrollingContainer scrolling container
• theme

formats format whitelist

This configuration item is very useful. For example, in the Nuggets comment box just mentioned, we found that only plain text can be inserted in the comment box, and other formats are not allowed. Even the formatted text pasted in will become plain text.

It is easy to implement in Quill, just configure formats as an empty array.

const quill = new Quill('#editor', {
  theme: 'snow',
  formats: []
});

Note that the formats format whitelist here controls the actual format of the content, which has nothing to do with the formatting channel. For example formats set to empty, then no matter it is:

• Format via the toolbar
• Still use shortcut keys (such as Ctrl+B ) to set the format
• Or paste the formatted text
Both cannot be formatted.

If we want to keep a part of the format, for example, only keep bold and list two formats:

const quill = new Quill('#editor', {
  theme: 'snow',
  formats: [ 'bold', 'list' ]
});

Quill supports a total of 11 inline formats:

• background
• bold
• color
• font
• code
• italic
• link
• size
• strike
• script
• underline

7 block-level formats:

• blockquote
• header
• indent
• list
• align
• direction
• code-block

3 embedded formats:

• formula
• image
• video

If the formats 21 formats will be supported by default.

placeholder text

We found that when there is no input in the Nuggets comment box, there will be a placeholder text of input comment....

This can be easily achieved by configuring the placeholder option.

const quill = new Quill('#editor', {
  formats: [],
  placeholder: '输入评论...',
});

readOnly read only mode

readOnly can be achieved by configuring 060cfdd9b83e59:

The initial state editor is in the reading state and cannot be edited. You can change the editor into the editing state edit button.

Since the Nuggets comment box does not support editing, it will not be used as an example.

Take DevCloud Kanban project as an example. In the initial state, the comment is not editable. Click the edit button to become editable, and display the toolbar, save button and other elements. Click the save button to add new content Is saved and the editor becomes read-only.

modules module configuration

Putting this configuration item at the end does not mean that it is not important. On the contrary, this is the most commonly used configuration for 160cfdd9b83f3c in Quill.

In the previous article, I introduced Quill's modular mechanism . This configuration item is used to configure Quill's modules.

In Quill's modular mechanism article, we mentioned

Quill has a total of 6 built-in modules:

• Clipboard paste version
• History Operation history
• Keyboard keyboard events
• Syntax syntax highlighting
• Toolbar Toolbar
• Uploader file upload

The purpose of each module is detailed in the Quill built-in module chapter.

modules option can be used to configure these modules.

Configure toolbar module

Quill only displays a part of the formatting buttons in the toolbar by default. There is no button for inserting pictures. We can add them by configuring the toolbar module.

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      // 默认的
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'link'],
      [{ list: 'ordered'}, { list: 'bullet' }],
      ['clean'],
      
       // 新增的
      ['image']
    ]
  }
});

If you want to be a rich text editor like Nuggets, it's also very simple.

The rich text editor of Nuggets mainly contains the following toolbar buttons:

• Bold
• Italic
• Underscore
• Title I/II
• Quote
• Code block
• Inline code
• Unordered list
• Ordered list
• Hyperlinks
• Insert picture

To use Quill, you need to configure the toolbar module like this.

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      'bold', 'italic', 'underline', 
      { header: 1 }, { header: 2 },
      'blockquote', 'code-block', 'code', 'link',
      { list: 'ordered'}, { list: 'bullet' },
      'image',
    ]
  }
});

With a slight modification of the style, you can make a rich text editor similar to the Nuggets rich text editor. The effect is as follows:

The following is a comparison chart with the actual rich text editor of Nuggets:

Comparing the above effect comparison chart, except that the icon of the toolbar uses the icon of the Nuggets Markdown editor, the others are almost the same.

Configure keyboard module

In addition to the toolbar module, we can also configure other modules, such as the shortcut key module keyboard , the keyboard module supports many shortcut keys by default, such as:

• The bold shortcut key is Ctrl+B ;
• The shortcut key for the hyperlink is Ctrl+K ;
• The shortcut key for undo/back is Ctrl+Z/Y .

But it does not support strikethrough shortcut keys. If we want to customize strikethrough shortcut keys, suppose it is Ctrl+Shift+S , you can configure it like this:

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      // 默认的
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'link'],
      [{ list: 'ordered'}, { list: 'bullet' }],
      ['clean'],
      ['image']
    ],
    
    // 新增的
    keyboard: {
      bindings: {
        strike: {
          key: 'S',
          ctrlKey: true,
          shiftKey: true,
          handler: function(range, context) {
            // 获取当前光标所在文本的格式
            const format = this.quill.getFormat(range);
            // 增加/取消删除线
            this.quill.format('strike', !format.strike);
          }
        },
      }
    },
  }
});

Configure the history module

Quill's built-in history module 1s , and put it into the history operation stack (maximum 100) to facilitate undo/rollback operations.

If we don't want to record so frequently, we want to 2s . In addition, we want to increase the size of the operation stack to record 200 operation history at most. You can configure it like this:

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      // 默认的
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'link'],
      [{ list: 'ordered'}, { list: 'bullet' }],
      ['clean'],
      ['image']
    ],
    keyboard: {
      bindings: {
        strike: {
          key: 'S',
          ctrlKey: true,
          shiftKey: true,
          handler: function(range, context) {
            // 获取当前光标所在文本的格式
            const format = this.quill.getFormat(range);
            // 增加/取消删除线
            this.quill.format('strike', !format.strike);
          }
        },
      }
    },
    
    // 新增的
    history: {
      delay: 2000, // 2s记录一次操作历史
      maxStack: 200, // 最大记录200次操作历史
    }
  }
});

summary

This article mainly introduces the basic usage of Quill and how to configure Quill through options.

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: [e-mail].

Text/DevUI Kagol

Recommendations of previous articles

"The Practice of Angular Schematics in DevUI Admin"

"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"