qull富文本编辑器实现文本标注颜色

示例版本

"quill": "^1.3.7",

引入插件

import Quill from 'quill'
import 'quill/dist/quill.snow.css'

绑定dom

 
if="textContent.ainsContent">
      
      
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] }}
      
 

初始化编辑器

  data() {     return {       content: '

example content

',       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 || ''
      })
    },