前言：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>' 然后替换成对应的数据
效果展示
因展示需要，代码略有删减，若功能不能实现或者其他问题 欢迎私信交流
posted on
