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无法执行的解决办法
Feb 25 Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
vue组件传值的实现方式小结【三种方式】
Feb 05 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
动易数据转成dedecms的php程序
2007/04/07 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP常用的小程序代码段
2015/11/14 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
pycharm安装图文教程
2017/05/02 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python str字符串转uuid实例
2020/03/03 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
Python如何合并多个字典或映射
2020/07/24 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
自荐信格式范文
2013/10/07 职场文书
投资合作协议书范本
2014/04/17 职场文书
国企干部对照检查材料
2014/08/22 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
会议欢迎词范文
2015/01/27 职场文书
英文版辞职信
2015/02/28 职场文书
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL