富文本编辑器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了。

到这里我们就可以使用quill富文本编辑器了，可以给它设置官网上的所有的属性和方法。官网地址
接下来就是要满足产品的需求。
1：插入变量。quill提供了可以自定义标签的方法，具体操作如下：
新建一个js文件。这里我取名叫quill.js,自定义的标签名叫ruleVariates。这个文件是需要引入到vue组件中。

import { Quill } from 'vue-quill-editor';
const Embed = Quill.import('blots/embed');
// 拿到内嵌
class ruleVariates extends Embed {
  static blotName = 'ruleVariates';
  static tagName = 'ruleVariates';
  static create(value) {
    if (!value.split) return super.create('')
    let val = value.split(',')
    const node = super.create(val[0]);
    node.innerHTML = val[0];
    node.setAttribute('logType', val[0]);
    return node;
  }
}
// 注册
Quill.register(ruleVariates)

我们可以通过setAttribute给这个变量设置属性，设置的属性和我们平时使用的class，id是一样的。
上面我就是给这个自定义标签设置了logType这个属性。
2：变量设置好了，那就需要把它插入到设定的位置。

• 获取要插入到的位置
  quill提供了focus这个方法，可以获取当前的焦点位置。如果没有焦点的话，就默认是0。但是这里如果当度使用focus方法是会存在一些问题，必须搭配selection-change方法一起使用。具体原因的话我也不是很清楚。

    descFocus(){
      const quill = this.$refs['editor'].quill;
      this.descRage = quill.getSelection();
    },

这个时候descRage的index属性就是当前的焦点的位置。

• 将变量插入到焦点的位置

    addVarToText() {
      this.$nextTick(() => {
        const quill = this.$refs['editor'].quill;
        const range = this.descRage;
        let message = '';
        if (!range) {
          message = '请先点击到文本框！';
        } else {
          quill.insertEmbed(range.index, 'ruleVariates', 'logType',
        }
      })
    },

这时候这里的logType就会作为ruleVariates标签的logType属性的值。
到这里我们就已经将功能实现了90%了。因为ruleVariates标签是一个整体，所以删除的时候整个变量都会被删除。

3: 最后一步，给变量设置样式。
直接在css中操作就可以啦！

rulevariates {
  color: #1596f0;
  font-weight: 700;
}

好啦_{现在就大功告成了。bingo}