富文本编辑器quill在vue项目中的使用

前段时间在项目中有这样一个需求：
1：要求用户在输入文字的过程中可以引用变量，并且可以插入到任意的位置。
2：引用的变量要求是一个整体，删除的话必须整体删除。不能在一个变量的中间插入其他的文字。
3：引用的变量和输入的文字在样式上也要有区别。

拿到这样一个需求，第一个想到的就是需要使用富文本编辑器。随后经过调研，选择了github上start 25k的quill。

下面就来说一个我的使用方案吧。
1：因为项目使用的框架为vue所以下载安装vue-quill-editor：npm install vue-quill-edito
2：引入到组件中使用，需要以下两个部分：

• 头部引入

import { quillEditor} from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

• 作为components引入该组件

    components: {
   	 QuillEditor: quillEditor,
    },

3：这样就可以在项目中使用quillEditor了。

<QuillEditor
    ref="editor"
    v-model="desc"
 >

到这里我们就可以使用quill富文本编辑器了，可以给它设置官网上的所有的属性和方法。