自定义设置vue-quill-editor toolbar的title属性

const titleConfig = {
  'ql-bold':'加粗',
  'ql-color':'字体颜色',
  'ql-font':'字体',
  'ql-code':'插入代码',
  'ql-italic':'斜体',
  'ql-link':'添加链接',
  'ql-background':'背景颜色',
  'ql-size':'字体大小',
  'ql-strike':'删除线',
  'ql-script':'上标/下标',
  'ql-underline':'下划线',
  'ql-blockquote':'引用',
  'ql-header':'标题',
  'ql-indent':'缩进',
  'ql-list':'列表',
  'ql-align':'文本对齐',
  'ql-direction':'文本方向',
  'ql-code-block':'代码块',
  'ql-formula':'公式',
  'ql-image':'图片',
  'ql-video':'视频',
  'ql-clean':'清除字体样式'
};



export function addQuillTitle(){
  const oToolBar = document.querySelector('.ql-toolbar'),
        aButton = oToolBar.querySelectorAll('button'),
        aSelect =  oToolBar.querySelectorAll('select'),
        aSpan= oToolBar.querySelectorAll('span');
  aButton.forEach((item)=>{
    if(item.className === 'ql-script'){
      item.value === 'sub' ? item.title = '下标': item.title = '上标';
    }else if(item.className === 'ql-indent'){
      item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
    }else if(item.className === 'ql-list'){
	 item.value==='ordered' ? item.title='有序列表' : item.title='无序列表'
	}else if(item.className === 'ql-header'){
	 item.value === '1' ? item.title = '标题H1': item.title = '标题H2';
	}else{
     item.title = titleConfig[item.classList[0]];
    }
  });
  aSelect.forEach((item)=>{
    if(item.className!='ql-color'&&item.className!='ql-background'){
     item.parentNode.title = titleConfig[item.classList[0]];
    }
  });
  aSpan.forEach((item)=>{
    if(item.classList[0]==='ql-color'){
      item.title = titleConfig[item.classList[0]];
    }else if(item.classList[0]==='ql-background'){
      item.title = titleConfig[item.classList[0]];
    }
  });
}

//how to use
//import { addQuillTitle } from './set-quill-title.js'
//addQuillTitle();     --use in mouted
//自定义 set title
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值