在网上查了好多,基本都是基于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。