扩展 Quill 属性实现自定义行高

在 Vue 项目中，如果需要为 vue-quill-editor 增加行高控制功能，首先需要通过 Quill 的 Parchment 模块定义一个新的样式属性。可以创建一个独立的 JavaScript 文件来处理行高逻辑。

// line-height-handler.js
import Quill from "quill";

const Parchment = Quill.import("parchment");

class LineHeightStyleAttributor extends Parchment.Attributor.Style {}

// 定义行高白名单及样式映射
const LineHeightConfig = new LineHeightStyleAttributor("lineHeight", "line-height", {
  scope: Parchment.Scope.INLINE,
  whitelist: ["1", "1.2", "1.5", "1.75", "2", "2.5", "3"]
});

export { LineHeightConfig };

在组件中注册并配置编辑器

在编辑器初始化之前，需要通过 Quill.register 方法将自定义的行高格式注册到编辑器实例中。同时，在工具栏配置项中加入该功能。

import { quillEditor } from 'vue-quill-editor';
import * as Quill from 'quill';
import { LineHeightConfig } from "./line-height-handler";

// 注册行高扩展
Quill.register({ "formats/lineHeight": LineHeightConfig }, true);

export default {
  components: { quillEditor },
  data() {
    return {
      content: '',
      editorSettings: {
        placeholder: '请输入内容...',
        theme: 'snow',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline'],
              [{ 'header': [1, 2, 3, false] }],
              [{ 'lineHeight': LineHeightConfig.whitelist }], // 引入行高白名单
              ['image', 'link']
            ],
            handlers: {
              lineHeight: (value) => {
                if (value) {
                  this.$refs.textEditor.quill.format("lineHeight", value);
                }
              }
            }
          }
        }
      }
    };
  },
  methods: {
    onEditorReady(quill) {
      // 编辑器准备就绪后的回调
    }
  }
};

优化工具栏 UI 样式

默认情况下，自定义的工具栏项可能没有文字显示，需要通过 CSS 伪元素 ::before 来设置下拉列表的显示名称。

<style lang="scss">
/* 设置行高插件的默认标签 */
.ql-snow .ql-picker.ql-lineHeight .ql-picker-label::before {
  content: "行高";
}

/* 映射行高数值到显示文字 */
.ql-snow .ql-picker.ql-lineHeight .ql-picker-item::before,
.ql-snow .ql-picker.ql-lineHeight .ql-picker-label::before {
  &[data-value="1"]::before { content: "单倍"; }
  &[data-value="1.5"]::before { content: "1.5倍"; }
  &[data-value="2"]::before { content: "2倍"; }
  &[data-value="3"]::before { content: "3倍"; }
}

.ql-snow .ql-picker.ql-lineHeight {
  width: 80px;
}
</style>

处理图片上传与工具栏提示优化

为了提升用户体验，通常会结合 el-upload 等组件处理图片上传，并为工具栏图标添加中文悬浮提示。

<template>
  <div class="editor-wrapper">
    <!-- 隐藏的上传组件，由编辑器工具栏触发 -->
    <el-upload
      v-show="false"
      class="custom-uploader"
      action="/api/upload"
      :before-upload="validateFile"
      :on-success="insertImageToQuill"
    />
    <quill-editor
      ref="textEditor"
      v-model="content"
      :options="editorSettings"
      @change="handleContentChange"
    />
  </div>
</template>

<script>
export default {
  methods: {
    insertImageToQuill(res) {
      const quill = this.$refs.textEditor.quill;
      const selection = quill.getSelection();
      if (res.url) {
        quill.insertEmbed(selection ? selection.index : 0, 'image', res.url);
        quill.setSelection(selection.index + 1);
      }
    },
    setupToolbarTooltips() {
      const tooltips = [
        { selector: '.ql-bold', text: '加粗' },
        { selector: '.ql-image', text: '插入图片' },
        { selector: '.ql-lineHeight', text: '设置行高' }
      ];
      tooltips.forEach(item => {
        const node = document.querySelector(item.selector);
        if (node) node.setAttribute('title', item.text);
      });
    }
  },
  mounted() {
    this.setupToolbarTooltips();
  }
};
</script>

进阶布局适配

针对富文本编辑器在页面中的显示，建议通过 CSS 深度选择器对内容区域进行微调，确保图片的响应式展示和段落间距的正确解析。

<style scoped>
.editor-wrapper ::v-deep .ql-editor {
  min-height: 300px;
  line-height: 1.5;
  
  p img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
  }
}

/* 修复缩进导致样式偏移的问题 */
.editor-wrapper ::v-deep .ql-indent-1 {
  text-indent: 2em;
  padding-left: 0 !important;
}
</style>