vue-quill-editor富文本编辑器配置行高

import Quill from "quill";

let Parchment = Quill.import("parchment");
console.log(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', '5' ]
});

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

工具栏配置

const toolbarOptions = [
  [{ lineheight: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5'] }]
];

//编辑器相关
editorOption: {
  placeholder: "请在这里输入发布的内容",
  modules: {
    toolbar: {
      container: toolbarOptions, //工具栏
      handlers: {
        lineheight: function (value) {
          if (value) {
            this.quill.format('lineHeight', value);
          } else {
            console.log(value);
          }
        }
      }
    }
  }
}

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

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

样式设置，注意：不能加scoped

<style lang="scss">
//配置编辑器行高
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
  content: '行高';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='initial']::before {
  content: '默认';
}
.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='1.75']::before {
  content: '1.75';
}
.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';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
  content: '5';
}
.ql-snow .ql-picker.ql-lineheight {
  width: 70px;
}
</style>