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

 更新时间:2020年08月03日 09:57:46   作者:汪小穆  
这篇文章主要介绍了Vue 实现对quill-editor组件中的工具栏添加title,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

前言: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>

③、运行结果

像这样鼠标移入的时候就会显示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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VUE 3D轮播图封装实现方法

    VUE 3D轮播图封装实现方法

    这篇文章主要为大家详细介绍了VUE 3D轮播图封装实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • vue-router2.0 组件之间传参及获取动态参数的方法

    vue-router2.0 组件之间传参及获取动态参数的方法

    下面小编就为大家带来一篇vue-router2.0 组件之间传参及获取动态参数的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue.config.js常用配置详解

    vue.config.js常用配置详解

    这篇文章主要介绍了vue.config.js常用配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • iview中Select 选择器多选校验方法

    iview中Select 选择器多选校验方法

    下面小编就为大家分享一篇iview中Select 选择器多选校验方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件

    Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件

    这篇文章主要介绍了Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vue 实现 ios 原生picker 效果及实现思路解析

    vue 实现 ios 原生picker 效果及实现思路解析

    这篇文章主要介绍了vue 实现 ios 原生picker 效果及实现思路解析,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12
  • vue 实现特定条件下绑定事件

    vue 实现特定条件下绑定事件

    今天小编就为大家分享一篇vue 实现特定条件下绑定事件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue全屏事件开发详解

    vue全屏事件开发详解

    这篇文章主要为大家详细介绍了vue全屏事件的开发过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作

    vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作

    这篇文章主要介绍了vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue.js 2.0和Cordova开发webApp环境搭建方法

    Vue.js 2.0和Cordova开发webApp环境搭建方法

    下面小编就为大家分享一篇Vue.js 2.0和Cordova开发webApp环境搭建方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论