示例版本
"quill": "^1.3.7",
引入插件
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
绑定dom
<div class="main-text" ref="editor" :content="content" v-if="textContent.ainsContent"> <!-- 循环段落 --> <p v-for="(item, index) in textContent.ainsContent.parag" :key="index" class="parag"> <!-- 循环句子 --> <span class="sent" :parag="item[0]" :sent="sent[0]" v-for="(sent, sentIndex) in handleSent(item)" :key="sentIndex" >{{ sent[1] }}</span > </p> </div>
初始化编辑器
data() {
return {
content: '<p>example content</p>',
editorOption: {
placeholder: '暂无数据'
},
qull:null
}
}
//初始化编辑器 quillInit() { let dom = this.$refs.editor this.quill = new Quill(dom, this.editorOption) this.quill.enable(false)//禁用编辑 this.setFontColor(0, this.quill.getLength(), '#ffffff', '#000') },
获取选中
selectionContent() { let range = this.quill.getSelection() let text, start, length, end if (!range) { return {text, start, length, end} } text = this.quill.getText(range.index, range.length) start = range.index length = range.length end = start + length - 1 return { text, start, length, end } },
设置背景色
setFontColor(start, length, bgColor, color, uuid) { this.quill.formatText(start, length, { background: `${bgColor || ''}`, color: color || '' }) },