vue-quill-editor设置字体大小

前言：Vue项目中需要用到富文本编辑器，所以选择了vue-quill-editor这个富文本编辑器，发现字体只有几种大小可以选择，满足不了产品的需求，研究了半天终于改好了。主要是需要更改配置文件，以及对应的CSS和js文件。

修改后效果图如下：

font-size.png

1.改变 toolbarOptions的配置项,如图是我自定义的字体大小，false代表的默认选中的字体大小,默认选中的16px。

     editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'size': ['12px', '14px', false ,'18px', '22px', '26px', '30px', '36px', '42px'] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            ["image"] //上传图片
          ]
        }

2.接下来我们在 node_modules包 中找到 quill ，再找到它下面的dist文件夹。

quill_dist.jpg

3.在quill.core.js中更改代码如下，也要和你上面配置文件中的字体大小设置保持一致。

var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', {
  scope: _parchment2.default.Scope.INLINE,
  whitelist: ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']
});
var SizeStyle = new _parchment2.default.Attributor.Style('size', 'font-size', {
  scope: _parchment2.default.Scope.INLINE,
  whitelist: ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']
});

4.在quill.js中更改代码如下，也要和你上面配置文件中的字体大小设置保持一致。

var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', {
  scope: _parchment2.default.Scope.INLINE,
  whitelist: ['12px', '14px', '16px' ,'18px', '22px', '26px', '30px', '36px', '42px']
});
var SizeStyle = new _parchment2.default.Attributor.Style('size', 'font-size', {
  scope: _parchment2.default.Scope.INLINE,
  whitelist: ['12px', '14px', '16px' ,'18px', '22px', '26px', '30px', '36px', '42px']
});

===================================我是分割线=========================================

接下来就是修改CSS样式了，因代码过长，所以示例中只写了12px和14px，其他字体大小按同样方式配置即可~~

5.找到quill.core.css，修改如下：

.ql-editor .ql-size-12px {
  font-size: 12px;
}
.ql-editor .ql-size-14px {
  font-size: 14px;
}
...

6.找到quill.bubble.css，修改如下：

/*第一部分*/
.ql-editor .ql-size-12px {
  font-size: 12px;
}
.ql-editor .ql-size-14px {
  font-size: 14px;
}
...
/*第二部分*/
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: '12px';
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: '14px';
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  font-size: 12px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  font-size: 14px;
}
...

7.找到quill.snow.css，修改如下：

（注：第一项为编辑器默认的字体大小）

/*第一项为编辑器默认的字体大小*/
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: '16px';
}
...