Vue3富文本自定义行高

codecodegirl

已于 2023-06-19 15:57:01 修改

阅读量437

点赞数

文章标签：前端

于 2023-06-19 15:45:38 首次发布

本文链接：https://blog.csdn.net/weixin_51002293/article/details/131289330

版权

文章展示了如何在Vue3项目中安装和使用@vueup/vue-quill插件，创建富文本编辑器。内容包括安装插件、导入组件、自定义行高（通过修改Parchment配置）以及在toolbar中添加行高选项。此外，还介绍了如何集成imageDrop和imageResize模块，以及设置字体和大小的选项。

摘要由CSDN通过智能技术生成

1. Vue3使用插件@vueup/vue-quill

npm install @vueup/vue-quill

2. 组件中引入

import { QuillEditor, Quill } from '@vueup/vue-quill';

3. 自定义行高

const Parchment = Quill.import('parchment');
let config = {
  scope: Parchment.Scope.BLOCK,
  whitelist: ['1', '1.5', '2', '2.5']
};
const lineHeightClass = new Parchment.Attributor.Class(
  'lineHeight',
  'ql-line-height',
  config
);
const lineHeightStyle = new Parchment.Attributor.Style(
  'lineHeight',
  'line-height',
  config
);
Parchment.register(lineHeightClass);
Parchment.register(lineHeightStyle);

4. toolbar中新增

[{ lineHeight: config.whitelist }]

完整代码

<template>
    <QuillEditor
      v-model:content="content"
      contentType="html"
      :options="options"
      @keydown.stop
      ref="editorRef"
    />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { QuillEditor, Quill } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ImageDrop } from 'quill-image-drop-module';
import imageResize from 'quill-image-resize-module';

Quill.register('modules/ImageDrop', ImageDrop);
Quill.register('modules/imageResize', imageResize);

// 自定义行高
const Parchment = Quill.import('parchment');
let config = {
  scope: Parchment.Scope.BLOCK,
  whitelist: ['1', '1.5', '2', '2.5']
};
const lineHeightClass = new Parchment.Attributor.Class(
  'lineHeight',
  'ql-line-height',
  config
);
const lineHeightStyle = new Parchment.Attributor.Style(
  'lineHeight',
  'line-height',
  config
);
Parchment.register(lineHeightClass);
Parchment.register(lineHeightStyle);

// 设置字体和大小
const fonts = [
  'SimSun',
  'SimHei',
  'Microsoft-YaHei',
  'KaiTi',
  'FangSong',
  'Arial',
  'Times-New-Roman',
  'sans-serif'
];
const Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);
const fontSize = Quill.import('attributors/style/size');
fontSize.whitelist = ['16px', '32px', '64px', '96px'];
Quill.register(fontSize, true);

const editorRef = ref(null);
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{ size: ['small', 'normal', 'large', 'huge'] }],
  [{ color: [] }, { background: [] }],
  [
    {
      font: fonts
    }
  ],
  [{ align: [] }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['image'],
  [{ lineHeight: config.whitelist }]
];
const options = {
  debug: 'info',
  modules: {
    toolbar: {
      container: toolbarOptions
    },
    ImageDrop: true,
    imageResize: {
      displayStyles: {
        backgroundColor: 'black',
        border: 'none',
        color: 'white'
      },
      modules: ['Resize', 'DisplaySize']
    }
  },
  readOnly: false,
  theme: 'snow'
};

const content = ref('');
</script>