Quill 自定义行高

在使用Quill的过程中，发现官方并没有自定义行高的功能，恰好产品有这样的需求，因此需要自己添加。

废话少说，直接上核心代码，以下是以Vue为示例

<template>
     <quill-editor v-model="data" :options="editorOption" ref="editor" />
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import { quillEditor } from 'vue-quill-editor';
import Quill from 'quill';


// 行高，这里是从1.0开始到2.5，步增0.1
const lineHeight = [...Array(16).keys()].map((x) => `${(100 + x * 10) / 100}`);

const parchment = Quill.import('parchment');
const lineHeightConfig = {
  scope: parchment.Scope.INLINE,
  whitelist: lineHeight,
};
const lineHeightStyle = new parchment.Attributor.Style(
  'lineHeight',
  'line-height',
  lineHeightConfig
);
// 最核心的两行代码
Quill.register({ 'formats/lineHeight': lineHeightStyle }, true);
Quill.register({ lineHeightStyle: true });


export default {
    data() {
        return {
            data:'',
            editorOption:{
                modules: {
                  toolbar: {
                    container: [
                      ...其他工具
                      [{ lineheight: lineHeight }],
                    ],
                    handlers: {
                      lineheight: (value: any) => {
                        const editor = this.$refs.editor.quill as any;
                        if (value) {
                          editor.format('lineHeight', value);
                        }
                      },
                    },
                  },
                }
              }
        }
    }
}
</script>

到这里，基本上已经完成了自定义行高的主要实现。

最后需要添加上 css 样式

<style>
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
  content: '行高';
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item {
  &::before {
    content: attr(data-value) !important;
  }
}

.ql-snow .ql-picker.ql-lineheight {
  width: 70px;
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-options {
  height: 200px;
  overflow: auto;
}
</style>