富文本编辑器 vue-quill-editor 实现 mention 提醒功能

业务需要要实现一个富文本编辑器，而且同时还要实现提醒@的功能。

组件官网地址：1. https://www.npmjs.com/package/@yixink/quill-mention

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

1.组件准备

使用vue-quill-editor 和 quill-mention 实现此功能

安装组件

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

2.组件引入 

在main.js 引入组件

import VueQuillEditor from 'vue-quill-editor' //引入富文本编译器

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

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

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

Vue.use(VueQuillEditor)

3.页面引入编辑器

在所需要使用编辑器的页面引入编辑器

1) 在script 引入文件

 

import Quill from 'quill'

import { quil