前言：vue-quill-editor心得总结。

• 基础用法
• 显示问题(回显格式不正确)
• 插入带颜色字符后 光标颜色改变，后续字体颜色随之变化
• 实现点击富文本外条件列表，自动在富文本中插入，及之后的条件回填

1.安装并引入

下载包并在mian.ts中引入 vue-amap

 

npm install vue-quill-editor

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)

在template中

  <quill-editor v-model="tempContent" :options="editorOption" ref="myQuillEditor" />

在script中

 

  //data 中
  editorOption= [
    ['bold'], // 加粗 斜体 下划线 删除线
    [{ indent: '-1' }, { indent: '+1' }], // 缩进
  ]，
  tempContent："富文本中默认内容"

2.常见问题

1）富文本内容传给服务端后，在别的地方回显的时候，格式显示错误 如 空格

  //解决办法   在要显示的地方 加上 ql-editor 这个类名
    <div v-html="checkData.data[0].content" class="ql-editor"></div>

2）在富文本中插入带格式内容，该格式会影响之后输入的文本 如颜色 加粗等

 //问题出现原因 是因为quill富文本会根据当前光标之前有格式的文本来给之后的文本添加样式，所以 通过插入一个带格式的空格去解决
     var num = _this.$refs.myQuillEditor.quill.selection.savedRange.index     //获取富文本中光标位置
     //以下参数分别为  num富文本中光标位置 data要插入的文本   { color: 'rgb(230, 0, 0)' } 新插入文本的颜色
     _this.$refs.myQuillEditor.quill.insertText(num, data, { color: 'rgb(230, 0, 0)' })   
     _this.$refs.myQuillEditor.quill.insertText(num + data.length, ' ', { color: 'rgba(0, 0, 0, 0.65)' })
     _this.$refs.myQuillEditor.quill.selection.savedRange.index = num + data.length + 1   //将光标移到插入的文本(+1 为带格式空格的长度)之后

3.实现业务功能

产品的需求为 通过点击左侧列表，在富文本中插入对应的条件，然后在其它的页面筛选出条件，并将条件替换为具体数据

     <ul>
           <li v-for="(item, index) in arr" :key="index" v-html="item" @click="addCondition(item)"></li>
     </ul>
     <quill-editor v-model="tempContent" :options="editorOption" ref="myQuillEditor" />

 //富文本会记录之前光标位置，在点击了别的地方后，还是可以获取到光标位置
  mounted() {
   //使用事件捕获  
   window.addEventListener('click', this.cancelQuill, true)
 },
   methods: {
   //点击非富文本区域
   cancelQuill(e: any) {
     if (e.target.nodeName !== 'LI') {
       this.Flag = false
     }
   },
   //富文本插入
   addCondition(data: any) {
     var _this: any = this
     if (!this.Flag)  return
       var num = _this.$refs.myQuillEditor.quill.selection.savedRange.index     
       _this.$refs.myQuillEditor.quill.insertText(num, data, { color: 'rgb(230, 0, 0)' })   
       _this.$refs.myQuillEditor.quill.insertText(num + data.length, ' ', { color: 'rgba(0, 0, 0, 0.65)' })
       _this.$refs.myQuillEditor.quill.selection.savedRange.index = num + data.length + 1   
   }
 },
 beforeDestroy() {
   window.removeEventListener('click', this.cancelQuill, true)
 }

 //别的页面回显的时候 直接字符串查找 比如'<span style="color: rgb(230, 0, 0);">{处理结果}</span>' 然后替换成对应的数据

效果展示

因展示需要，代码略有删减，若功能不能实现或者其他问题 欢迎私信交流

来源：https://www.cnblogs.com/ak-blog/p/15309651.html