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)