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 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
Vue获取微博授权URL代码实例
Nov 04 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
php输出xml必须header的解决方法
2014/10/17 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
javascript学习网址备忘
2007/05/29 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
js实现查询商品案例
2020/07/22 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python根据服务获取端口号的方法
2019/09/25 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
上班打牌检讨书
2014/02/07 职场文书
高一学生期末评语
2014/04/25 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
成本会计岗位职责
2015/02/03 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android