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

最新推荐文章于 2025-01-15 17:32:28 发布

_Jika_

最新推荐文章于 2025-01-15 17:32:28 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_37331593/article/details/117740900

本文介绍如何使用Quill富文本编辑器自定义行高属性，包括配置工具栏选项、注册格式以及编辑器的相关设置。通过示例代码展示了如何实现不同行高的选择，并对编辑器的样式进行了定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>