美文网首页
vue-quill-editor设置字体font-family

vue-quill-editor设置字体font-family

作者: ing1023 | 来源:发表于2020-01-16 15:32 被阅读0次

    前言:Vue项目中需要用到富文本编辑器,所以选择了vue-quill-editor这个富文本编辑器,发现字体font-family只有三种Sans Serif、Serif、MonoSpace可以选择,满足不了产品的需求,研究了半天终于改好了。主要是需要更改配置文件,以及对应的CSS文件。

    1.改变 toolbarOptions的配置项,如图是我自定义的字体样式,默认选中的微软雅黑。

    font-family.png

    具体操作代码如下:

    import Quill from 'quill'  //引入编辑器
    var fonts = ['Microsoft-YaHei','SimSun', 'SimHei','KaiTi','Arial','Times-New-Roman'];
    var Font = Quill.import('formats/font');
    Font.whitelist = fonts; //将字体加入到白名单
    /*data中toolbar配置如下:*/
    editorOption: {
      modules: {
        toolbar: [
           [{ 'font': fonts }],
           [{ 'size': ['12px', '14px', false ,'18px', '22px', '26px', '30px', '36px', '42px'] }],
           ['bold', 'italic', 'underline', 'strike'],
           [{ 'indent': '-1' }, { 'indent': '+1' }],
           [{ 'align': [] }],
           ["image"] //上传图片
        ]
      }
    }
    

    1.在 node_modules包 中找到 quill ,再找到它下面的dist文件夹。

    2.找到quill.core.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";
    }
    

    3.找到quill.snow.css,修改如下:

    .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";
    }
    

    相关文章

      网友评论

          本文标题:vue-quill-editor设置字体font-family

          本文链接:https://www.haomeiwen.com/subject/cuvfzctx.html