相关文章推荐
温柔的煎鸡蛋  ·  js怎么将两个json数组合并 - CSDN文库·  9 月前    · 
小眼睛的紫菜  ·  为什么qq文件显示安全检查未通过-掘金·  1 年前    · 
打盹的人字拖  ·  How to Create DLL in ...·  2 年前    · 
一身肌肉的包子  ·  C# ...·  2 年前    · 
含蓄的钢笔  ·  postman传递json数组_(小蚂蚁)的 ...·  2 年前    · 
Code  ›  Vue 实现对quill-editor组件中的工具栏添加title开发者社区
vue 工具栏
https://cloud.tencent.com/developer/article/1953077
乖乖的弓箭
1 年前
作者头像
用户6493868
0 篇文章

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

前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > vue封装H5 > Vue 实现对quill-editor组件中的工具栏添加title

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

作者头像
用户6493868
发布 于 2022-03-08 23:41:11
706 0
发布 于 2022-03-08 23:41:11
举报

前言: 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]];
 
推荐文章
温柔的煎鸡蛋  ·  js怎么将两个json数组合并 - CSDN文库
9 月前
小眼睛的紫菜  ·  为什么qq文件显示安全检查未通过-掘金
1 年前
打盹的人字拖  ·  How to Create DLL in C# and call in Delphi XE6 - Stack Overflow
2 年前
一身肌肉的包子  ·  C# 用Serialize方法序列化后“&”字符变成Unicode字符“\u0026”_百度知道
2 年前
含蓄的钢笔  ·  postman传递json数组_(小蚂蚁)的博客-CSDN博客
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号