gdy-quill-editor/lib/formats/format-emoji-blot.js

基于Quill的vue编辑器组件 npm@0.1.6

import Quill from 'quill'
import emojiMap from '../config/emoji-map'

const Embed = Quill.import('blots/embed')

class EmojiBlot extends Embed {
  static create(value) {
    const node = super.create()
    if (typeof value === 'object') {
      EmojiBlot.buildSpan(value.item, node)
    } else if (typeof value === 'string') {
      const valueObj = emojiMap[value.item]

      if (valueObj) {
        EmojiBlot.buildSpan(valueObj, node)
      }
    }
    return node
  }

  static value(node) {
    return node.dataset.name
  }

  static buildSpan(value, node) {
    node.setAttribute('data-name', value.name)
    const emojiSpan = document.createElement('span')
    emojiSpan.classList.add(this.emojiClass)
    emojiSpan.classList.add(this.emojiPrefix + value.name)
    // unicode can be '1f1f5-1f1ea',see emoji-list.js.
    emojiSpan.innerText = String.fromCodePoint(
      ...EmojiBlot.parseUnicode(value.unicode)
    )
    node.appendChild(emojiSpan)
  }
  static parseUnicode(string) {
    return string.split('-').map((str) => parseInt(str, 16))
  }
}

EmojiBlot.blotName = 'emoji'
EmojiBlot.className = 'ql-emojiblot'
EmojiBlot.tagName = 'span'
EmojiBlot.emojiClass = 'ap'
EmojiBlot.emojiPrefix = 'ap-'

export default EmojiBlot