vue3改变Quill工具栏悬浮颜色

在vue中使用Quill富文本编辑器,想改变一下工具栏的悬停颜色,请各位朋友们支招!

img

感谢各位回答,这个实际上因为QUill组件的原有样式问题,要找到源代码进行修改

修改一下这个元素onhover状态的css

img

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7655695
  • 这篇博客你也可以参考下:vue 使用quill富文本编辑 增加表格功能
  • 除此之外, 这篇博客: vue中使用富文本编辑器Quill中的 修改工具栏的字体 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • var fonts = ['Microsoft-YaHei', 'SimSun', 'SimHei', 'KaiTi', 'Arial', 'Times-New-Roman']
    var Font = Quill.import('attributors/class/font')
    Font.whitelist = fonts // 将字体加入到白名单
    Quill.register(Font, true)
    
    tabbar配置中修改
    [{ 'font': fonts }],
    

    css中修改对应的中文名称

    .ql-editor .ql-font-Microsoft-YaHei {
      font-family: "Microsoft YaHei";
    }
    .ql-editor .ql-font-SimSun {
      font-family: "SimSun";
    }
    .ql-editor .ql-font-SimHei {
      font-family: "SimHei";
    }
    .ql-editor .ql-font-KaiTi {
      font-family: "KaiTi";
    }
    .ql-editor .ql-font-Arial {
      font-family: "Arial";
    }
    .ql-editor .Times-New-Roman {
      font-family: "Times New Roman";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: '微软雅黑';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
     content: "微软雅黑";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
      content: "宋体";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
     content: "黑体";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
     content: "楷体";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
     content: "Arial";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
     content: "Times New Roman";
    }