<!--
@ 作者: 秦东
@ 时间: 2024-06-25 08:57:59
@ 备注: QuillEditor 富文本编辑器
-->
<template>
	<div :style="'display: block; width: 100%; height: '+height+'; padding-bottom: 25px; border: 1px solid #Eeeeee;'">
		<QuillEditor
			ref="quillRef"
			v-model:content="content"
			:options="myOptions"
			contentType="html"
			@update:content="setValue()"
		/>
	</div>
</template>
<script setup>
import Compressor from 'compressorjs';
import { QuillEditor, Quill } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import ImageUploader from 'quill-image-uploader';
import ImageResize from 'quill-image-resize-custom-module';
import { uploadFilesSysFile } from '@/api/api';
import '@/styles/QuillFont.css'; // 字体和字体大小的自定义文件



// 设置行高的配置======start
const lineHeight = ['1', '1.25', '1.5', '1.75', '2.5', '3', '5'];
const parchment = Quill.import('parchment');
const lineHeightConfig = {
	scope: parchment.Scope.INLINE,
	whitelist: lineHeight,
};
const lineHeightStyle = new parchment.Attributor.Style(
	'lineHeight',
	'line-height',
	lineHeightConfig,
);
Quill.register({ 'formats/lineHeight': lineHeightStyle }, true);
// 设置行高的配置======end
 
const props = defineProps({
	// 左侧菜单数据
	modelValue: String,
	height:{
		type:String,
		default:"500px"
	},
});
const emit = defineEmits(['update:modelValue']);
const content = ref('');
const quillRef = ref(null);
// 设置字体大小
const fontSizeStyle = Quill.import('attributors/style/size'); // 引入这个后会把样式写在style上
fontSizeStyle.whitelist = [
	'12px',
	'14px',
	'16px',
	'18px',
	'20px',
	'22px',
	'24px',
	'28px',
	'30px',
	'32px',
	'34px',
	'36px',
	'38px',
	'40px',
	'42px',
	'44px',
	'46px',
	'48px',
	'50px',
	'52px',
	'54px',
	'56px',
	'60px',
];
// 设置字体
const fontStyle = Quill.import('attributors/style/font'); // 引入这个后会把样式写在style上
fontStyle.whitelist = [
	'SimSun', // 宋体
	'SimHei', // 黑体
	'STFANGSO', // 华文仿宋
	'Microsoft-YaHei', // 微软雅黑
	'KaiTi', // 楷体
	'FangSong', // 仿宋
	'STKAITI', // 华文楷体
	'Arial',
	'Times-New-Roman',
	'sans-serif',
];
 
Quill.register(fontSizeStyle, true);
Quill.register(fontStyle, true);
Quill.register('modules/imageUploader', ImageUploader);
Quill.register('modules/imageResize', ImageResize);
 
// 图片压缩
const compressImage = (file) => {
	return new Promise((resolve, reject) => {
		// eslint-disable-next-line no-new
		new Compressor(file, {
			quality: 0.6, // 设置压缩质量
			success(result) {
				resolve(result);
			},
			error(error) {
				reject(error);
			},
		});
	});
};
// 富文本配置项，将模块功能一起写入到配置项内，也可以单独配置Modules
const myOptions = reactive({
	modules: {
		toolbar: {
			container: [
				['bold', 'italic', 'underline', 'strike'], // 加粗、斜体、下划线、删除线
				[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题，不同级别的标题
				[{ align: [] }], // 对齐方式
				['blockquote', 'code-block'], // 引用，代码块
				[{ script: 'sub' }, { script: 'super' }], // 上标/下标
				[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
				[{ indent: '-1' }, { indent: '+1' }], // 缩进
				['link', 'image', 'video'], // 超链接 图片 视频
				[{ direction: 'rtl' }], // 文本方向
				[{ color: [] }, { background: [] }], // 字体颜色和背景色
				[{ size: fontSizeStyle.whitelist }], // 字体大小
				[{ font: fontStyle.whitelist }], // 字体
				[{ lineheight: lineHeight }], // 设置行高
				['clean'], // 清除格式
			],
			handlers: {
				lineheight: (value) => {
					const editor = quillRef.value.getQuill();
					if (value) {
						editor.format('lineHeight', value);
					}
				},
			},
		},
		
		// 设置图片的大小--可拖拽设置大小
		imageResize: {
			parchment: Quill.import('parchment'),
		},
	},
	placeholder: '请输入内容...',
});
 
const setValue = () => {
	// 用于设置双向绑定值
	const text = toRaw(quillRef.value).getHTML();
	emit('update:modelValue', text);
};
 
watch(
	() => props.modelValue,
	(val) => {
		if (val) {
			content.value = val; // 用于监听绑定值进行数据回填
		} else {
			// eslint-disable-next-line no-unused-expressions
			toRaw(quillRef.value) && toRaw(quillRef.value).setContents(''); // 可用于弹窗使用富文本框关闭弹窗清除值
		}
	},
	{
		immediate: true, // 组件创建时立即执行一次回调
	},
);
</script>
<style>
.ql-container {
	height: calc(100% - 42px);
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
	font-family: SimHei;
	content: '黑体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Microsoft-YaHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Microsoft-YaHei']::before {
	font-family: 'Microsoft YaHei';
	content: '微软雅黑';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
	font-family: KaiTi;
	content: '楷体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
	font-family: FangSong;
	content: '仿宋';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
	font-family: SimSun;
	content: '宋体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='STFANGSO']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='STFANGSO']::before {
	font-family: STFANGSO;
	content: '华文仿宋';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='STKAITI']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='STKAITI']::before {
	font-family: STKAITI;
	content: '华文楷体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
	font-family: Arial;
	content: 'Arial';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Times-New-Roman']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Times-New-Roman']::before {
	font-family: 'Times New Roman';
	content: 'Times New Roman';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='sans-serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='sans-serif']::before {
	font-family: sans-serif;
	content: 'sans-serif';
}
.ql-font-SimSun {
	font-family: SimSun;
}
.ql-font-SimHei {
	font-family: SimHei;
}
.ql-font-Microsoft-YaHei {
	font-family: 'Microsoft YaHei';
}
.ql-font-KaiTi {
	font-family: KaiTi;
}
.ql-font-FangSong {
	font-family: FangSong;
}
.ql-font-Arial {
	font-family: Arial;
}
.ql-font-Times-New-Roman {
	font-family: 'Times New Roman';
}
.ql-font-sans-serif {
	font-family: sans-serif;
}
 
/* 字号设置 */
 
/* 默认字号 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
	content: '字号';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
	font-size: 12px;
	content: '12px';
}
.ql-size-12px {
	font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
	font-size: 14px;
	content: '14px';
}
.ql-size-14px {
	font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
	font-size: 16px;
	content: '16px';
}
.ql-size-16px {
	font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {
	font-size: 18px;
	content: '18px';
}
.ql-size-18px {
	font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
	font-size: 20px;
	content: '20px';
}
.ql-size-20px {
	font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='22px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='22px']::before {
	font-size: 22px;
	content: '22px';
}
.ql-size-24px {
	font-size: 24px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
	font-size: 24px;
	content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='26px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='26px']::before {
	font-size: 26px;
	content: '26px';
}
.ql-size-26px {
	font-size: 26px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='28px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='28px']::before {
	font-size: 28px;
	content: '28px';
}
.ql-size-28px {
	font-size: 28px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='30px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='30px']::before {
	font-size: 30px;
	content: '30px';
}
.ql-size-30px {
	font-size: 30px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='32px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='32px']::before {
	font-size: 32px;
	content: '32px';
}
.ql-size-32px {
	font-size: 32px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
	font-size: 36px;
	content: '36px';
}
.ql-size-36px {
	font-size: 36px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='40px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='40px']::before {
	font-size: 40px;
	content: '40px';
}
.ql-size-40px {
	font-size: 40px;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::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>
