vue中使用vue-quill-editor富文本编辑器：自定义行高、选中后工具栏初始化

1、引入组件

editor
      ref="myQuillEditor"
      v-model="content"
      class="editor ql-editor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
      @ready="ready($event)"
    />

// 工具栏配置
import { quillEditor } from 'vue-quill-editor'
import { Uploads } from '@/api/hpms/qiniu'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

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: ["1", "2", "3", "4", "5"]
});

export { lineHeightStyle };

import { lineHeightStyle } from "./lineHeight";

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

editorOption: {
        placeholder: '您想说点什么？',
        theme: 'snow', // or 'bubble'
        modules: {

          toolbar: {
            container: toolbarOptions,
            // container: "#toolbar",
            handlers: {
              lineHeight: (value) => {                 
                if (value) {
                  const quill = this.$refs.myQuillEditor.quill
                  quill.format("lineHeight", value);
                }
              }
   
            }
          }
        }
      },

3、行高样式

.ql-snow .ql-picker.ql-lineHeight .ql-picker-label::before {
  content: "行高";
}

.ql-snow .ql-picker.ql-lineHeight .ql-picker-item[data-value="1"]::before,.ql-snow .ql-picker.ql-lineHeight .ql-picker-label[data-value="1"]::before {
  content: "行高1";
}
.ql-snow .ql-picker.ql-lineHeight .ql-picker-item[data-value="1.5"]::before,
.ql-snow .ql-picker.ql-lineHeight .ql-picker-label[data-value="1.5"]::before {
  content: "行高1.5";
}

.ql-snow .ql-picker.ql-lineHeight .ql-picker-item[data-value="1.75"]::before,.ql-snow .ql-picker.ql-lineHeight .ql-picker-label[data-value="1.75"]::before {
  content: "行高1.75";
}
.ql-snow .ql-picker.ql-lineHeight .ql-picker-item[data-value="2"]::before,.ql-snow .ql-picker.ql-lineHeight .ql-picker-label[data-value="2"]::before {
  content: "行高2";
}
.ql-snow .ql-picker.ql-lineHeight .ql-picker-item[data-value="3"]::before,.ql-snow .ql-picker.ql-lineHeight .ql-picker-label[data-value="3"]::before {
  content: "行高3";
}
.ql-snow .ql-picker.ql-lineHeight .ql-picker-item[data-value="4"]::before,.ql-snow .ql-picker.ql-lineHeight .ql-picker-label[data-value="4"]::before {
  content: "行高4";
}
.ql-snow .ql-picker.ql-lineHeight .ql-picker-item[data-value="5"]::before ,.ql-snow .ql-picker.ql-lineHeight .ql-picker-label[data-value="5"]::before{
  content: "行高5";
}
.ql-snow .ql-picker.ql-lineHeight {
  width: 70px;
}

4、效果图

5、完整代码