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 08 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
js中数组常用方法总结(推荐)
Apr 09 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代码包装修正版
2008/03/15 PHP
php 地区分类排序算法
2013/07/01 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
应用英语专业自荐信
2014/01/26 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
小学家长评语大全
2014/04/16 职场文书
超市创业计划书
2014/04/24 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
消防安全主题班会
2015/08/12 职场文书
初中思想品德教学反思
2016/02/24 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis