vue富文本vue-quill-editor实现点击插入条件

  • A+
所属分类：Web前端
摘要

前言：vue-quill-editor心得总结。
便宜好用的国外VPS推荐

前言：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>' 然后替换成对应的数据

效果展示

vue富文本vue-quill-editor实现点击插入条件

因展示需要，代码略有删减，若功能不能实现或者其他问题 欢迎私信交流
便宜好用的国外VPS推荐