Rich text editor vue-quill-editor implements mention reminder function

The business needs to implement a rich text editor, and at the same time implement the function of reminding @.

Component official website address: 1.  https://www.npmjs.com/package/@yixink/quill-mention

2. https://github.surmon.me/vue-quill-editor/

1. Component Preparation

Use vue-quill-editor and quill-mention to achieve this function

Install components

yarn add quill  vue-quill-editor quill-mention -D

2. Component introduction 

Introduce components in main.js

import VueQuillEditor from 'vue-quill-editor' //Introduce rich text compiler

import 'quill/dist/quill.core.css'

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

import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

3. Import the page into the editor

Introduce the editor on the page where the editor needs to be used

1) Introduce files in script

 

import Quill from 'quill'

import { quillEditor } from 'vue-quill-editor' // import rich text

import mention from 'quill-mention' // import mention component

import 'quill-mention/dist/quill.mention.min.css'

// Register mention component for quill

Quill.register({

'modules/mention': mention,

})

2) Prepare configuration items (defined in data)

editorOptions: {

placeholder: this.placeholder, // text prompt information

modules: { 

toolbar: [['bold', 'underline', { color: [] }, { list: 'ordered' }, { list: 'bullet' }]], // define the menu bar (bold, underline, color , Sorting. Other configurations can be found on the official website)

mention: {  // Key point: Reminder function configuration item

allowedChars: /^[A-Za-z\s]*$/, // regular match

mentionDenotationChars: ['@'], // Matching symbols, matching @ symbols pops up a reminder box

offsetLeft: 4,

source: (searchTerm, renderList, mentionChar) => { // data source (traversal into {id, value} form)

const values = that.$store.getters.userList.map(item => ({

id: item.value,

value: item.key,

}))

renderList(values, searchTerm) // rendering function (generate reminder box)

},

onSelect:(data, insertItem) => { // Note: callback function after selection

const item = {

text: `@${data.value}`,

name: data.value,

id: data.id,

}

insertItem(data) // Note: This function must be added, and the selected value will be displayed in the text box only if this function is present

this.onSelectd(item) // Return to the person who selected the reminder on the backend

},

},

},

},

 

Extension: toolbar configuration

// [{ 'font': [] }], font

// ['bold', 'underline'], underline and bold

// [{ 'header': 1 }, { 'header': 2 }], header

// [{ 'script': 'sub' }, { 'script': 'super' }], subscript

// [{ indent: '-1' }, { indent: '+1' }], indent

// [{ 'size': ['small', false, 'large', 'huge'] }], font size

// [{ header: [1, 2, 3, 4, 5, 6, false] }], header

// [{ align: [] }], alignment

// ['blockquote', 'code-block'], block quote, code block

// ['image'], // link, picture, video

3. The page uses a rich text box

<quill-editor
    v-model="value"
    :options="editorOptions"
    @change="onHandleChange" // 文本改变回调函数
/>

 

4. The effect is as follows

 

5. Advantages

Solved a lot of problems that the cursor will appear abnormal when using the text box and the reminder function