zhibo/components/YEditor/YEditor.vue

<template>
	<view class="container">
		<view class="page-body">
			<view class="wrapper">
				<view class="toolbar" @tap="format" style="max-height: 240rpx; overflow-y: auto">
					<!-- 字体 -->
					<!-- <view
            :class="data.formats.fontFamily ? 'ql-active' : ''"
            class="iconfont icon-font"
            data-name="fontFamily"
            data-value="Pacifico"
          ></view> -->
					<!-- 加粗 -->
					<view :class="data.formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
					<!-- 斜体 -->
					<view :class="data.formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
					</view>
					<!-- 下划线 -->
					<view :class="data.formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
						data-name="underline"></view>
					<!-- 删除中划线 -->
					<!-- <view
            :class="data.formats.strike ? 'ql-active' : ''"
            class="iconfont icon-zitishanchuxian"
            data-name="strike"
          ></view> -->
					<!-- 字号 -->
					<!-- <view
            :class="data.formats.fontSize === '24px' ? 'ql-active' : ''"
            class="iconfont icon-font-size"
            data-name="fontSize"
            data-value="48rpx"
          ></view>-->
					<!-- 字体颜色 -->
					<!-- <view
            :class="data.formats.color === '#0000ff' ? 'ql-active' : ''"
            class="iconfont icon-font-colors"
            data-name="color"
            data-value="#0000ff"
          ></view>  -->
					<!-- 清除样式 -->
					<!-- <view class="iconfont icon-clearformat" @tap="removeFormat"></view> -->
					<!-- 对齐方式：左 -->
					<view :class="data.formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
						data-name="align" data-value="left"></view>
					<!-- 对齐方式：居中 -->
					<view :class="data.formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
						data-name="align" data-value="center"></view>
					<!-- 对齐方式：右 -->
					<view :class="data.formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
						data-name="align" data-value="right"></view>
					<!-- 对齐方式：两侧 -->
					<view :class="data.formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
						data-name="align" data-value="justify"></view>
					<!-- 行高 -->
					<!-- <view
            :class="data.formats.lineHeight ? 'ql-active' : ''"
            class="iconfont icon-line-height"
            data-name="lineHeight"
            data-value="2"
          ></view>-->
					<!-- 字间距 -->
					<!-- <view
            :class="data.formats.letterSpacing ? 'ql-active' : ''"
            class="iconfont icon-Character-Spacing"
            data-name="letterSpacing"
            data-value="2em"
          ></view>  -->
					<!-- 上边距 -->
					<!-- <view
            :class="data.formats.marginTop ? 'ql-active' : ''"
            class="iconfont icon-duanqianju"
            data-name="marginTop"
            data-value="40rpx"
          ></view> -->
					<!-- 下边距 -->
					<!-- <view
            :class="data.formats.marginBottom ? 'ql-active' : ''"
            class="iconfont icon-duanhouju"
            data-name="marginBottom"
            data-value="40rpx"
          ></view> -->
					<!-- 日期 -->
					<!-- <view class="iconfont icon-date" @tap="insertDate"></view> -->
					<!-- 勾选 -->
					<!-- <view
            class="iconfont icon--checklist"
            data-name="list"
            data-value="check"
          ></view> -->
					<!-- 有序排列 -->
					<view :class="data.formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
						data-name="list" data-value="ordered"></view>
					<!-- 无序排列 -->
					<view :class="data.formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
						data-name="list" data-value="bullet"></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-image" @tap="insertImage"></view>
					<!-- 设置标题 -->
					<view :class="data.formats.header === 3 ? 'ql-active' : ''" class="iconfont icon-H" data-name="header"
						:data-value="3"></view>
					<!-- 下标 -->
					<view :class="data.formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
						data-name="script" data-value="sub"></view>
					<!-- 上标 -->
					<view :class="data.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="data.formats.direction === 'rtl' ? 'ql-active' : ''"
            class="iconfont icon-direction-rtl"
            data-name="direction"
            data-value="rtl"
          ></view> -->
					<view class="iconfont icon-undo" @tap="undo"></view>
					<view class="iconfont icon-redo" @tap="redo"></view>
				</view>
				<view class="editor-wrapper">
					<!-- <editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar showImgResize >
					</editor> -->
					<editor id="editor" class="ql-container" :placeholder="data.placeholder" @statuschange="onStatusChange"
						:show-img-resize="true" @ready="onEditorReady" @input="getCtx"></editor>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 用户的token
	// const { token } = $(useUser());
	// import { javaBaseUrl } from "@/utils/request";
	import {
		reactive
	} from "vue";

	const {
		content
	} = defineProps({
		content: String,
	})

	let emits = defineEmits(["input"]);
	const data = reactive({
		editorCtx: "",
		readOnly: false,
		placeholder: "开始输入...",
		richText: "",
		formats: {},
	});

	function onEditorReady() {
		// 富文本节点渲染完成
		// #ifdef MP-BAIDU
		data.editorCtx =
			requireDynamicLib("editorLib").createEditorContext("editorId");
		// #endif
		// #ifdef APP-PLUS || H5 ||MP-WEIXIN
		uni
			.createSelectorQuery()
			.select("#editor")
			.context((res) => {
				data.editorCtx = res.context;
				// 初始化数据
				if (content) {
					data.editorCtx.setContents({
						html: content,
					});
				}
			})
			.exec();
		// #endif
	}

	// 失去焦点时，获取富文本的内容
	function getCtx(e) {
		data.richText = e.detail.html;
		emits('input', e.detail.html);
	}
	// 撤销操作
	function undo() {
		data.editorCtx.undo();
	}
	// 复原操作
	function redo() {
		data.editorCtx.redo();
	}

	//修改样式
	function format(e) {
		// console.log("format", e.target.dataset);
		let {
			name,
			value
		} = e.target.dataset;
		if (!name) return;
		data.editorCtx.format(name, value);
	}
	//通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
	function onStatusChange(e) {
		const formats = e.detail;
		data.formats = formats;
	}
	// 插入分割线
	function insertDivider() {
		data.editorCtx.insertDivider();
	}

	// 插入图片
	function insertImage() {
		uni.chooseImage({
			count: 1,
			sizeType: ["original", "compressed"],
			sourceType: ["album", "camera"],
			success: (res) => {
				// 上传图片的逻辑各有不同，自行调整即可
				uni.uploadFile({
					url: `${javaBaseUrl}/system/v1/upload`,
					fileType: "image",
					name: "file",
					header: {
						Authorization: token
					},
					filePath: res.tempFilePaths[0],
					success: (res) => {
						const imgData = JSON.parse(res.data) as {
							code: number;
							msg: string;
							success: boolean;
						};
						if (imgData.code === 200) {
							// 将图片展示在编辑器中
							data.editorCtx.insertImage({
								width: "20%", //设置宽度为100%防止宽度溢出手机屏幕
								height: "auto",
								src: imgData.msg,
								alt: "图像",
								success: function() {
									console.log("insert image success");
								},
							});
						} else {
							console.log("上传失败");
						}
					},
					fail: (err) => {
						console.log(err);
					},
				});
			},
		});
	}
	// 清空编辑器内容
	// function clear() {
	//   data.editorCtx.clear({
	//     success: function (res) {
	//       console.log("clear success");
	//     },
	//   });
	// }
	// 清除当前选区的样式
	// function removeFormat() {
	//   data.editorCtx.removeFormat();
	// }
	// 选择日期
	// function insertDate() {
	// 	const date = new Date();
	// 	const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
	// 	data.editorCtx.insertText({
	// 		text: formatDate
	// 	});
	// }
</script>

<style lang="scss" scoped>
	@import "//at.alicdn.com/t/c/font_4211210_2x20brbrv94.css";

	.page-body {
		// height: calc(100vh - var(--window-top) - var(--status-bar-height));
	}

	.wrapper {
		height: 100%;
	}

	.editor-wrapper {
		height: calc(100vh - var(--window-top) - var(--status-bar-height) - 280rpx - 650rpx);
		overflow: scroll;
		background: rgba(153, 153, 153, 0.05);
		border-radius: 20rpx;
		margin: 20rpx 0;
	}

	.iconfont {
		display: inline-block;
		margin: 20rpx 20rpx;
		width: 32rpx;
		height: 32rpx;
		cursor: pointer;
		font-size: 32rpx;
	}

	.toolbar {
		box-sizing: border-box;
		border-bottom: 0;
		font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	}

	.ql-container {
		box-sizing: border-box;
		padding: 24rpx 30rpx;
		width: 100%;
		min-height: 30vh;
		height: 100%;
		font-size: 28rpx;
		line-height: 1.5;
	}

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