zhibo/components/YEditor/richTextEditor.vue

<template>
	<view class="">

	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
</script>

<style lang="scss" scoped>

</style>
// Editor.vue
<template>
	<view class="container">
		<view class="editor-wrapper">
			<editor id="editor" ref="editorRef" class="ql-container" :placeholder="placeholder" @statuschange="onStatusChange"
				:show-img-resize="true" @ready="onEditorReady" @input="getCtx"></editor>
		</view>
		<view class="wrapper">
			<view class="toolbar" @tap="formatToolbar">
				<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header"
					:data-value="1"></view>
				<view :class="formats.header === 2 ? 'ql-active' : ''" class="iconfont icon-format-header-2" data-name="header"
					:data-value="2"></view>
				<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
				<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
				</view>
				<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline">
				</view>
				<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike">
				</view>
				<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align"
					data-value="left"></view>
				<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
					data-name="align" data-value="center"></view>
				<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align"
					data-value="right"></view>
				<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
					data-name="align" data-value="justify"></view>
				<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight"
					data-value="2"></view>
				<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
					data-name="letterSpacing" data-value="2em"></view>
				<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
					data-name="marginTop" data-value="20px"></view>
				<view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
					data-name="marginBottom" data-value="20px"></view>
				<!-- <view class="iconfont icon-clearedformat" @tap="removeFormat"></view> -->
				<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily"
					data-value="Pacifico"></view>
				<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
					data-name="fontSize" data-value="24px"></view>
				<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color"
					data-value="#0000ff"></view>
				<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor"
					data-name="backgroundColor" data-value="#00ff00"></view>
				<view class="iconfont icon-date" @tap="insertDate"></view>
				<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
				<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list"
					data-value="ordered"></view>
				<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list"
					data-value="bullet"></view>
				<view class="iconfont icon-undo" @tap="undo"></view>
				<view class="iconfont icon-redo" @tap="redo"></view>

				<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
				<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
				<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
				<view class="iconfont icon-charutupian" @tap="insertImage"></view>

				<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script"
					data-value="sub"></view>
				<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
					data-name="script" data-value="super"></view>
				<view class="iconfont icon-shanchu" @tap="clear"></view>
				<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
					data-name="direction" data-value="rtl"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		nextTick
	} from 'vue';

	const instance = getCurrentInstance(); // 组件实例
	const props = defineProps({
		value: {
			type: String,
			default: 'ces'
		}
	})
	const emit = defineEmits(['update:value'])
	// 只读
	const readOnly = ref(false)
	// 提示词
	const placeholder = ref('开始输入...')
	// 富文本内容
	const richText = ref('')
	// 底部工具栏
	const formats = ref({}
		as any)
	// 图片上传 - 接口
	const serverUrl = ref('/resource/oss/upload')
	// editor编辑器
	const editorCtx = ref < any > (null)

	// 只读改变
	const readOnlyChange = () => {
		readOnly.value = !readOnly.value;
	}

	// 编辑器初始化完成时触发
	const onEditorReady = () => {
		// 富文本节点渲染完成
		const htmls = props.value
		const contents = JSON.stringify(htmls)
		const query = uni.createSelectorQuery().in(instance);
		query.select("#editor").context((res: any) => {
			editorCtx.value = res.context;
			editorCtx.value?.setContents({
				html: htmls,
				delta: contents
			})
		}).exec();
	}

	// 编辑器内容改变时触发，detail = {html, text, delta}
	const getCtx = (e) => {
		richText.value = e.detail.html;
		// console.log('richText.value', richText.value);
		emit('update:value', richText.value)
		// this.$emit('input', e.detail.html);
	}

	// 撤销
	const undo = () => {
		editorCtx.value.undo();
	}

	// 重做
	const redo = () => {
		editorCtx.value.redo();
	}

	// 工具栏点击触发
	const formatToolbar = (e: any) => {
		const {
			name,
			value
		} = e.target.dataset;
		if (!name) return;
		editorCtx.value.format(name, value);
	}

	// 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
	const onStatusChange = (e: any) => {
		console.log(e);

		const format = e.detail;
		formats.value = format;
	}

	// 插入分割线
	const insertDivider = () => {
		editorCtx.value.insertDivider({
			success: function() {
				console.log('insert divider success');
			}
		});
	}

	// 清空
	const clear = () => {
		editorCtx.value.clear({
			success: function() {
				console.log('clear success');
			}
		});
	}

	// 重置格式
	const removeFormat = () => {
		editorCtx.value.removeFormat();
	}

	// 插入当前日期
	const insertDate = () => {
		const date = new Date();
		const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
		editorCtx.value.insertText({
			text: formatDate
		});
	}

	// 插入图片
	const insertImage = () => {
		// 选择图片
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: async (res: any) => {
				uni.uploadFile({
					url: serverUrl.value, //请求的图片上传接口,这里是基准地址加上传接口
					filePath: res.tempFilePaths[0],
					name: 'file',
					formData: {
						file: res.tempFiles[0],
					},
					success: res => {
						// 装换
						const data = JSON.parse(res.data)?.data;
						if (data?.url) {
							editorCtx.value?.insertImage({
								width: '98%', //设置宽度为100%防止宽度溢出手机屏幕
								height: 'auto',
								src: data.url,
								alt: data.fileName,
								success: function() {
									console.log('insert image success');
								}
							});
						} else {
							uni.showToast({
								title: '上传失败，请重试！',
								icon: 'error',
							})
						}
					},
					fail: err => {
						uni.showToast({
							title: '上传失败，请重试！',
							icon: 'error',
						})
					}
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	@import './editor-icon.css';

	.container {
		height: 100%;

		.editor-wrapper {
			height: 100%;
		}

		.wrapper {
			/* height: 100%; */
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
		}

		.iconfont {
			padding: 16rpx;
			/* width: 60rpx; */
			/* height: 60rpx; */
			cursor: pointer;
			font-size: 40rpx;
		}

		.toolbar {
			box-sizing: border-box;
			border-bottom: 0;
			font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
			height: 74rpx;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			overflow-x: scroll;
			margin: 0 20rpx;
			background-color: #fff;
			/* width: 100%; */
		}

		.ql-container {
			box-sizing: border-box;
			/* padding: 0 32rpx; */
			width: 100%;
			min-height: 30vh;
			height: 100%;
			margin-top: 20px;
			font-size: 16px;
			line-height: 1.5;
			overflow: scroll;
		}

		.ql-active {
			color: #a1d5ba;
		}
	}
</style>