vue实战022:Vue-Quill-Editor工具栏新增提示

今天来优化下Vue-Quill-Editor富文本编辑器,在编辑的工具栏中我们可以看到各式各样的图标,很多时候我们容易忘记图标对应的功能是什么,所以这里我们为其添加文字提示,当我将鼠标放到图标上时显示对应的功能提示,这样体验会好很多,下面是演示图。

因为Vue-Quill-Editor是人家封装的组件,所以这里我们直接用JavaScript来处理,首先我们需要先获取到对应图标的类名,这里我们可以通过浏览器中的开发者工具来查找,打开开发者工具,选择对应的图标在Elements项中会自动跳转到对应的元素位置,找到对应的类名,这里我们可以看到“加粗”的类名为ql-bold。

 通过此方法将所有的图标对应的类找到,如果存在相同的比如列表,有编号列表和项目列表,但是类名ql-list相同,我们可以在添加其他属性以示区别,如value值。然后我们将这些元素全放一个列表中,并给其指定对应的提示语,这样我们就得到如下的数据,把它放入data中等待调用。

toolbarTips: [
    {Choice:'.ql-bold',title:'加粗'},
    {Choice:'.ql-italic',title:'倾斜'},
    {Choice:'.ql-underline',title:'下划线'},
    {Choice:'.ql-header',title:'段落格式'},
    {Choice:'.ql-strike',title:'删除线'},
    {Choice:'.ql-blockquote',title:'块引用'},
    {Choice:'.ql-code-block',title:'插入代码段'},
    {Choice:'.ql-size',title:'字体大小'},
    {Choice:'.ql-list[value="ordered"]',title:'编号列表'},
    {Choice:'.ql-list[value="bullet"]',title:'项目列表'},
    {Choice:'.ql-header[value="1"]',title:'h1'},
    {Choice:'.ql-header[value="2"]',title:'h2'},
    {Choice:'.ql-align',title:'对齐方式'},
    {Choice:'.ql-color',title:'字体颜色'},
    {Choice:'.ql-background',title:'背景颜色'},
    {Choice:'.ql-image',title:'图像'},
    {Choice:'.ql-video',title:'视频'},
    {Choice:'.ql-link',title:'添加链接'},
    {Choice:'.ql-formula',title:'插入公式'},
    {Choice:'.ql-clean',title:'清除格式'},
    {Choice:'.ql-indent[value="-1"]',title:'向左缩进'},
    {Choice:'.ql-indent[value="+1"]',title:'向右缩进'},
    {Choice:'.ql-header .ql-picker-label',title:'标题大小'},
    {Choice:'.ql-header .ql-picker-item[data-value="1"]',title:'标题一'},
    {Choice:'.ql-header .ql-picker-item[data-value="2"]',title:'标题二'},
    {Choice:'.ql-header .ql-picker-item[data-value="3"]',title:'标题三'},
    {Choice:'.ql-header .ql-picker-item[data-value="4"]',title:'标题四'},
    {Choice:'.ql-header .ql-picker-item[data-value="5"]',title:'标题五'},
    {Choice:'.ql-header .ql-picker-item[data-value="6"]',title:'标题六'},
    {Choice:'.ql-header .ql-picker-item:last-child',title:'标准'},
    {Choice:'.ql-size .ql-picker-item[data-value="small"]',title:'小号'},
    {Choice:'.ql-size .ql-picker-item[data-value="large"]',title:'大号'},
    {Choice:'.ql-size .ql-picker-item[data-value="huge"]',title:'超大号'},
    {Choice:'.ql-size .ql-picker-item:nth-child(2)',title:'标准'},
    {Choice:'.ql-align .ql-picker-item:first-child',title:'居左对齐'},
    {Choice:'.ql-align .ql-picker-item[data-value="center"]',title:'居中对齐'},
    {Choice:'.ql-align .ql-picker-item[data-value="right"]',title:'居右对齐'},
    {Choice:'.ql-align .ql-picker-item[data-value="justify"]',title:'两端对齐'}
],

接下来我们要做的就是给对应的图标添加提示属性,刚才已经把所有的类提取出来了,接下来我们来定位到该类,这里我们用document.querySelector()方法来找到对应的元素,即然上面是列表,那么我们就可以通过循环来实现就可以了。Choice是指定的选择元素,title是对应的提示信息,为了避免定位偏差(其他地方也用到相同的类名),加上父级类名quill-editor,这样就不会定位错了。

for(let item of this.toolbarTips){
    let tip = document.querySelector('.quill-editor '+ item.Choice)
    if (!tip) continue
    tip.setAttribute('title',item.title)
}

为了让其载入时就执行,所以我们定义个方法在mounted中,当元素载入完成后执行即可,这里我加了一个操作,把内容框中的提示信息给去掉了,document.getElementsByClassName('ql-editor')[0].dataset.placeholder=''。

注意事项:

这里for循环中用的是of不是in,他们的区别在于 for...in循环的是key,for...of循环的是value,我们需要的是 Choice后面的值所以这里我们用of来实现。

欢迎关注本人的公众号:编程手札,文章也会在公众号更新

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ProgramNotes

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值