富文本编辑器-4-工具栏Tooltip模块

Quill默认工具栏没有提示信息,在playground有Tooltip的实现例子,是基于BootStrap的Tooltip实现的,但我们也可以用较少代码,手写一个Tooltip模块。

CSS实现

工具栏上的图标样式改为相对定位,再给每个图标加上属性tooltip,[tooltip]相对图标定位,再用伪元素编写小箭头和内容,就可以实现提示信息的效果。

index.js

import Quill from 'quill'
import {tooltips} from './tooltip-list.js'

class Tooltip {
  constructor (quill) {
    this.quill = quill
    this.toolbar = quill.getModule('toolbar')
    this.buttons = null
    this.selectors = null
    let toolbarElement = this.toolbar.container
    if (toolbarElement) {
      this.buttons = toolbarElement.querySelectorAll('button')
      this.selectors = toolbarElement.querySelectorAll('.ql-picker')
      for (let el of this.buttons) {
        this.setTooltip(el)
      }
      for (let el of this.selectors) {
        this.setTooltip(el)
      }
    }
  }

  setTooltip (el) {
    let format = [].find.call(el.classList, (className) => {
      return className.indexOf('ql-') === 0
    }).replace('ql-', '')
    let tip = ''
    if (tooltips[format]) {
      let tool = tooltips[format]
      if (typeof tool === 'string') {
        tip = tool
      } else {
        let value = el.value || ''
        if (value != null && tool[value]) {
          tip = tool[value]
        }
      }
    }
    Object.assign(el.style, {
      'position': 'relative'
    })
    el.setAttribute('tooltip', tip)
  }

}

Quill.register('modules/tooltip', Tooltip)

tooltip.css (参考pure-css-tooltips)

.ql-toolbar [tooltip]{
  position:relative;
}
.ql-toolbar [tooltip]::before{
  content: "";
  position: absolute;
  top:-4px;
  left:50%;
  transform: translateX(-50%);
  border-width: 4px 6px 0 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.7) transparent transparent transparent;
  z-index: 99;
  opacity:0;
}

.ql-toolbar [tooltip-position='left']::before{
  left:0%;
  top:50%;
  margin-left:-12px;
  transform:translatey(-50%) rotate(-90deg)
}
.ql-toolbar [tooltip-position='top']::before{
  left:50%;
}
.ql-toolbar [tooltip-position='bottom']::before{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
.ql-toolbar [tooltip-position='right']::before{
  left:100%;
  top:50%;
  margin-left:1px;
  transform:translatey(-50%) rotate(90deg)
}

.ql-toolbar [tooltip]::after {
  content: attr(tooltip);
  position: absolute;
  left:50%;
  top:-4px;
  transform: translateX(-50%) translateY(-100%);
  background: rgba(0,0,0,0.7);
  text-align: center;
  color: #fff;
  padding:4px 2px;
  font-size: 12px;
  min-width: 70px;
  border-radius: 5px;
  pointer-events: none;
  padding: 4px 4px;
  z-index:99;
  opacity:0;
}

.ql-toolbar [tooltip-position='left']::after{
  left:0%;
  top:50%;
  margin-left:-8px;
  transform: translateX(-100%) translateY(-50%);
}
.ql-toolbar [tooltip-position='top']::after{
  left:50%;
}
.ql-toolbar [tooltip-position='bottom']::after{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translateY(0%);
}
.ql-toolbar [tooltip-position='right']::after{
  left:100%;
  top:50%;
  margin-left:8px;
  transform: translateX(0%) translateY(-50%);
}

.ql-toolbar [tooltip]:hover::after,.ql-toolbar [tooltip]:hover::before {
   opacity:1
}

.quill-tooltip::before{
  content: "";
  position: absolute;
  bottom:-4px;
  left:50%;
  transform: translateX(-50%);
  border-width: 4px 6px 0 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.7) transparent transparent transparent;
  z-index: 99;
}

JS实现

JS实现较为麻烦,需要创建tooltip元素,append到body上,监听mouseenter和mouseleave,显示或隐藏tooltip。但因为是相对body定位,这样的tooltip避免了被页面上其他元素遮挡的问题。
另外,滚动时会出现tooltip跟随鼠标滚动的情况,这时需要获取工具栏所在的可滚动父元素。在其滚动时,隐藏tooltip。

import Quill from 'quill'
import {tooltips} from './tooltip-list.js'
import {getScrollParent} from 'utils/scrollInfo.js'

const tooltipStyles = {
  minWidth: '70px',
  position: 'absolute',
  padding: '4px 8px',
  textAlign: 'center',
  backgroundColor: 'rgba(0,0,0,0.7)',
  color: '#fff',
  cursor: 'default',
  borderRadius: '4px',
  fontSize: '12px',
  top: '-9999px',
  visibility: 'hidden'
}

class Tooltip {
  constructor (quill) {
    this.quill = quill
    this.toolbar = quill.getModule('toolbar')
    this.buttons = null
    this.selectors = null
    this.tip = null
    this.timeout = null
    this.mouseenterHandler = null
    this.mouseleaveHandler = null
    let toolbarElement = this.toolbar.container
    if (toolbarElement) {
      // 添加处理事件
      this.buttons = toolbarElement.querySelectorAll('button')
      this.selectors = toolbarElement.querySelectorAll('.ql-picker')
      for (let el of this.buttons) {
        this.addHandler(el)
      }
      for (let el of this.selectors) {
        this.addHandler(el)
      }
      // 创建tooltip
      this.createTooltip()
      // 滚动元素增加handler
      this.scrollElm = getScrollParent(toolbarElement)
      this.scrollElm.addEventListener('scroll', this.mouseleaveHandler)
    }
  }

  createTooltip () {
    this.tip = document.createElement('div')
    this.tip.classList.add('quill-tooltip')
    Object.assign(this.tip.style, tooltipStyles)
    document.body.appendChild(this.tip)
  }

  addHandler (el) {
    this.mouseenterHandler = () => {
      this.timeout = setTimeout(() => {
        this.showTooltip(el)
      }, 100)
    }
    this.mouseleaveHandler = () => {
      if (this.timeout) clearTimeout(this.timeout)
      this.hideTooltip()
    }
    el.addEventListener('mouseenter', this.mouseenterHandler)
    el.addEventListener('mouseleave', this.mouseleaveHandler)
  }

  showTooltip (el) {
    // let format = el.className.replace('ql-', '')
    let format = [].find.call(el.classList, (className) => {
      return className.indexOf('ql-') === 0
    }).replace('ql-', '')
    if (tooltips[format]) {
      let tool = tooltips[format]
      if (typeof tool === 'string') {
        this.tip.textContent = tool
      } else {
        let value = el.value || ''
        if (value != null && tool[value]) {
          this.tip.textContent = tool[value]
        }
      }
      const elRect = el.getBoundingClientRect()
      const tipRect = this.tip.getBoundingClientRect()
      const body = document.documentElement || document.body
      const bodyRect = {
        width: body.scrollWidth,
        height: body.scrollHeight,
        scrollTop: body.scrollTop,
        scrollLeft: body.scrollLeft
      }
      const offset = 3
      Object.assign(this.tip.style, {
        'top': elRect.top - elRect.height - offset + bodyRect.scrollTop + 'px',
        'left': elRect.left - (tipRect.width - elRect.width) / 2 + bodyRect.scrollLeft + 'px',
        'visibility': 'visible'
      })
    }
  }

  hideTooltip () {
    Object.assign(this.tip.style, {
      top: '-9999px',
      visibility: 'hidden'
    })
  }

  onDestroy () {
    console.warn('ondestroy')
    this.destroyTooltip()
    if (this.buttons) {
      for (let el of this.buttons) {
        this.removeHandler(el)
      }
    }
    if (this.selectors) {
      for (let el of this.selectors) {
        this.removeHandler(el)
      }
    }
    if (this.scrollElm) this.scrollElm.removeEventListener('scroll', this.mouseleaveHandler)
  }

  destroyTooltip () {
    if (this.tip.parentNode) this.tip.parentNode.removeChild(this.tip)
  }

  removeHandler (el) {
    el.removeEventListener('mouseenter', this.mouseenterHandler)
    el.removeEventListener('mouseleave', this.mouseleaveHandler)
  }
}

Quill.register('modules/tooltip', Tooltip)

获取滚动父元素的代码如下(来自ElementUI):

export const getScrollParent = function (element) {
  var parent = element.parentNode
  if (!parent) {
    return element
  }
  if (parent === document) {
    if (document.body.scrollTop !== undefined) {
      return document.body
    } else {
      return document.documentElement
    }
  }
  if (
    ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow')) !== -1 ||
    ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-x')) !== -1 ||
    ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-y')) !== -1
  ) {
    return parent
  }
  return getScrollParent(element.parentNode)
}
export const getStyleComputedProperty = function (element, property) {
  var css = window.getComputedStyle(element, null)
  return css[property]
}

Tooltip中的文本

文本通过获取图标的className来确定,如果是纯字符串,则直接用tooltips对象查找tooltips[format],如果还有一层,则根据其value进一步查找。

   let format = [].find.call(el.classList, (className) => {
      return className.indexOf('ql-') === 0
    }).replace('ql-', '')
    if (tooltips[format]) {
      let tool = tooltips[format]
      if (typeof tool === 'string') {
        this.tip.textContent = tool
      } else {
        let value = el.value || ''
        if (value != null && tool[value]) {
          this.tip.textContent = tool[value]
        }
      }

tooltips如下:

export const tooltips = {
  'align': {
    '': '对齐',
    'center': '居中对齐',
    'right': '右对齐',
    'justify': '两端对齐'
  },
  'background': '背景色',
  'blockquote': '引用',
  'bold': '加粗',
  'clean': '清除格式',
  'code': '代码',
  'code-block': '代码段',
  'color': '颜色',
  'direction': '方向',
  'float': {
    'center': '居中',
    'full': '全浮动',
    'left': '左浮动',
    'right': '右浮动'
  },
  'formula': '公式',
  'header': {
    '': '标题',
    '1': '标题1',
    '2': '标题2'
  },
  'italic': '斜体',
  'image': '图片',
  'indent': {
    '+1': '缩进',
    '-1': '取消缩进'
  },
  'link': '链接',
  'list': {
    'ordered': '有序列表',
    'bullet': '无序列表',
    'check': '选择列表'
  },
  'script': {
    'sub': '下标',
    'super': '上标'
  },
  'strike': '删除线',
  'underline': '下划线',
  'video': '视频',
  'undo': '撤销',
  'redo': '重做',
  'size': '字号',
  'font': '字体',
  'divider': '分割线',
  'formatBrush': '格式刷',
  'emoji': '表情'
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容