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

示例版本

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

 

自定义设置dom

 
   
     import 'quill/dist/quill.core.css'; 
    
   
     import 'quill/dist/quill.snow.css'; 
    
   
     import 'quill/dist/quill.bubble.css'; 
    
   
 
   
     import { quillEditor } from 'vue-quill-editor'; 
    
    
    
      var Quill = require('quill/dist/quill.js'); 
     
     
      
      
        const Inline = Quill.import('blots/inline'); 
       
      
 
      
        class format extends Inline { 
       
      
          static create(cc) { 
       
      
            const node = super.create(); 
       
      
            node.setAttribute('class', cc); 
       
      
            node.style.color = 'red'; 
       
      
            console.log(cc); 
       
      
            return node; 
       
      
          } 
       
      
          static formats(node) { 
       
      
            console.log('dhkjahdk'); 
       
      
            return node; 
       
      
          } 
       
      
        } 
       
      
        format.blotName = 'format'; 
       
      
        format.tagName = 'span'; 
       
      
        Quill.register(formatParam); 
       
      
     
    
  

this.editor.format('format', new Date().getTime()); // 全文格式化

 this.editor.formatText(

        开始下标,

        lengtj,

        'format',

        new Date().getTime()

      );     //指定下标格式化

 示例2：

// 引入源码中的BlockEmbed
const BlockEmbed = Quill.import('blots/block/embed')
// 定义新的blot类型
class AppPanelEmbed extends BlockEmbed {
  static create(value) {
    const node = super.create(value)
    node.setAttribute('contenteditable', 'false')
    node.setAttribute('width', '100%')
    //   设置自定义html
    node.innerHTML = this.transformValue(value)
    return node
  }

  static transformValue(value) {
    let handleArr = value.split('\n')
    handleArr = handleArr.map(e => e.replace(/^[\s]+/, '').replace(/[\s]+$/, ''))
    return handleArr.join('')
  }

  // 返回节点自身的value值 用于撤销操作
  static value(node) {
    return node.innerHTML
  }
}
// blotName
AppPanelEmbed.blotName = 'AppPanelEmbed'
// class名将用于匹配blot名称
AppPanelEmbed.className = 'embed-innerApp'
// 标签类型自定义
AppPanelEmbed.tagName = 'div'
Quill.register(AppPanelEmbed, true)

插入示例

        this.quill.insertEmbed(200, 'AppPanelEmbed', Dom.innerHTML)