vue + quill2.0+ 工具栏自定义行高

最新推荐文章于 2025-01-15 17:32:28 发布

原创最新推荐文章于 2025-01-15 17:32:28 发布 · 982 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在网上查了好多，基本都是基于1.0+版本的，拿过来都用不了，官方又没有文档，只能参考各位前辈的经验+解析源码查找问题。目前已经解决，下面是实现过程。

实现代码

先看效果图

我用的是原生quill库，正常引入quill，注册行高插件

import Quill from 'quill'
import 'quill/dist/quill.snow.css'
const Parchment = Quill.import('parchment')
// 这里是重点，2.0+需要用Parchment.ClassAttributor
// 按照其它基于1.0+的文档直接用Attributor.class会报错
class lineHeightAttributor extends Parchment.ClassAttributor {}

const lineHeightStyle = new lineHeightAttributor(
  'lineheight',
  'ql-lineheight',
  {
    scope: Parchment.Scope.INLINE,
    whitelist: ['', '1', '1-5', '1-75', '2', '3', '4', '5']
  }
)
Quill.register({ 'formats/lineHeight': lineHeightStyle }, true)

注册完后toolbarOptions里引入，css里添加相应样式

const toolbarOptions = [
        // ... 你自己的插件配置
        [{ lineheight: ['', '1', '1-5', '1-75', '2', '3', '4', '5'] }], // 行高
      ]

.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
  content: '1';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1-5']::before,
.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-label[data-value='1-75']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1-75']::before {
  content: '1.75';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
  content: '2';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
  content: '3';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
  content: '4';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
  content: '5';
}
.ql-snow .ql-picker.ql-lineheight {
  width: 70px;
}
.ql-snow .ql-editor .ql-lineheight-1 {
  line-height: 1;
}
.ql-snow .ql-editor .ql-lineheight-1-5 {
  line-height: 1.5;
}
.ql-snow .ql-editor .ql-lineheight-1-75 {
  line-height: 1.75;
}
.ql-snow .ql-editor .ql-lineheight-2 {
  line-height: 2;
}
.ql-snow .ql-editor .ql-lineheight-3 {
  line-height: 3;
}
.ql-snow .ql-editor .ql-lineheight-4 {
  line-height: 4;
}
.ql-snow .ql-editor .ql-lineheight-5 {
  line-height: 5;
}

排坑点

按照网上其它资料上使用 Attributor 在2.0+的版本不好使，加上.class报错，不加行高样式会加不进去

问题解析

Attributor是直接插入行内的（不会插入到class/style内，这个方法是用来插入属性的），打印源码后发现有ClassAttributor和StyleAttributor，我这边是用class控制行高样式选择用ClassAttributor，有其它需求场景也可以用StyleAttributor。