前言：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" ></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.uj5u.com/qiye/301188.html
標籤：其他
上一篇：AJAX