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

àì夳堔傛蜴生んèń 2022-10-09 12:08 1136阅读 0赞

## 一、效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]

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

1、改变 quillOptions的配置项  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 2]

[{  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';
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: /images/20221005/22194845503a40c68c56b4927e4b852c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221005/708cb743345049babe35ea38115b5d97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 2]: /images/20221005/c19a52024aec4ece81a5d480aad821eb.png