Vue 实现对quill-editor组件中的工具栏添加title


Posted in Javascript onAugust 03, 2020

前言:quill-editor组件中的工具栏都是英文,而且最难受的时没有title提示,要怎样给他添加title,并且是中文的title提示呢?

一、创建一个quill-title.js文件

①、在其中插入以下代码

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');
 aButton.forEach(function(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{
   item.title = titleConfig[item.classList[0]];
  }
 });
 aSelect.forEach(function(item){
  item.parentNode.title = titleConfig[item.classList[0]];
 });
}

②、在页面中应用

<template>
 <quill-editor v-model="content" >
 </quill-editor>
</template>
 
<script>
 
 import { quillEditor } from 'vue-quill-editor'
 import { addQuillTitle } from './quill-title.js'
 
 export default {
  components: {
   quillEditor
  },
  mounted(){
   addQuillTitle();
  },
  data() {
   return {
    content: '<h2>freddy</h2>',
   }
  }
 }
</script>

③、运行结果

Vue 实现对quill-editor组件中的工具栏添加title

像这样鼠标移入的时候就会显示title了。

补充知识:自定义设置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

以上这篇Vue 实现对quill-editor组件中的工具栏添加title就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
简单了解three.js 着色器材质
Aug 03 #Javascript
Element InputNumber 计数器的实现示例
Aug 03 #Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 #Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 #Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 #Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 #Javascript
js实现点击上传图片并设为模糊背景
Aug 02 #Javascript
You might like
Terran兵种介绍
2020/03/14 星际争霸
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
Python内存读写操作示例
2018/07/18 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
应届生会计电算化求职信
2013/10/03 职场文书
求职推荐信
2013/10/28 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
体操比赛口号
2014/06/10 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书