vue-quill-editor富文本编辑框---自定义字号和行高

一、效果图

二、自定义字号（采取修改源代码的方式，如有更好的方式欢迎评论区提出）

1、改变 quillOptions的配置项

[{ size: ['12px', '14px', false, '18px', '22px', '26px', '30px', '36px', '42px'] }]

2、到node_modules下面找到 quill, 对目录dist 下面的 css文件和 js文件进行修改。
quill.core.js

// small,large,huge 这三个是默认的，可以删可以留。后面必须增加和editor配置项一样。
whitelist: ['12px','14px','16px','18px','22px','26px','30px','36px','42px']

quill.snow.css

//设置默认normal显示为16px
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '16px';
}

// 
需要全部增加一下css选项
.ql-editor .ql-size-12px {
    font-size: 12px;
}
.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-item[data-value="12px"]::before {
    font-size: 12px;
}

三、自定义行高

1、更改quillOptions的配置项目

 [{ lineheight: ['1', '1.5', '2', '3', '4'] }],

2、新增lineHeight.js文件

import Quill from 'quill'
const Parchment = Quill.import('parchment')
class LineHeightAttributor extends Parchment.Attributor.Style {}
const lineHeightStyle = new LineHeightAttributor('lineHeight', 'line-height', {
  scope: Parchment.Scope.INLINE,
  whitelist: ['initial', '1', '1.5', '1.75', '2', '3', '4']
})

export { lineHeightStyle }

3、使用时引入

import Quill from 'quill'
import { lineHeightStyle } from '@/util/lineHeight'

<quill-editor  
  @ready="ready($event)"
  >
</quill-editor>

ready() {
      Quill.register({ 'formats/lineHeight': lineHeightStyle }, true)
}

4、在App.vue中更改富文本全局css样式

.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
    content: '行高';
    font-size: 12px;
    width: 80px;
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
    content: '1';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
    content: '1.5';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
    content: '2';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
    content: '3';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
    content: '4';
  }