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>