clsd/app/components/leditor/leditor.vue

<template>
	<view class="editor">
		<view class="cons">
			<view v-if="read">
				<u-parse :content="value"></u-parse>
			</view>
			<view v-else>
				<view class="toolbar" @tap="format">
					<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="icon" data-name="list" data-value="ordered" title="编号">&#xe7f5;</view>
					<view class="icon" @tap="clear" title="清空内容">&#xe8b6;</view>
				</view>
				<editor id="editor" class="ql-container" :placeholder="placeholder" showImgSize showImgToolbar showImgResize @input="editorChange" @statuschange="onStatusChange" :read-only="false" @ready="onEditorReady"></editor>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'leditor',
	props: {
		value: {
			default: ''
		},
		read: {
			type: Boolean,
			default: false
		},
		placeholder: {
			type: String,
			default: '输入就诊记录，支持图文，快捷插入就诊日期'
		}
	},
	data() {
		return {
			ready: false,
			formats: {}
		};
	},
	methods: {
		//初始化
		onEditorReady() {
			uni.createSelectorQuery()
				.in(this)
				.select('#editor')
				.context((res) => {
					this.editorCtx = res.context;
				})
				.exec();
		},
		//设置编辑器内容
		setContents() {
			if (!this.read) {
				setTimeout(() => {
					this.editorCtx.setContents({
						html: this.value
					});
				}, 3000);
			}
		},
		//修改样式
		format(e) {
			let { name, value } = e.target.dataset;
			if (!name) return;
			this.editorCtx.format(name, value);
		},
		//插入分割线
		insertDivider() {
			this.editorCtx.insertDivider();
		},
		//插入日期
		insertDate() {
			const date = new Date();
			const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
			this.editorCtx.insertText({
				text: formatDate
			});
		},
		//改变编辑器内样式
		onStatusChange(e) {
			const formats = e.detail;
			this.formats = formats;
		},
		//清除全部内容
		clear() {
			this.editorCtx.clear();
		},
		//内容改变时
		editorChange: function (e) {
			this.$emit('input', e.detail.html);
		},
		//插入图片
		insertImage() {
			uni.chooseImage({
				count: 9, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (chooseImageRes) => {
					chooseImageRes.tempFilePaths.forEach((item) => {
						uni.showLoading({ title: '正在上传图片...', mask: true });
						uni.uploadFile({
							url: this.http.urls.upload,
							filePath: item,
							name: 'file',
							header: { Authorization: this.getUser().token },
							success: (res) => {
								uni.hideLoading();
								let result = JSON.parse(res.data);
								if (result.code === 200) {
									this.editorCtx.insertImage({
										src: this.http.urls.ip + JSON.parse(res.data).fileName,
										alt: '图像'
									});
								} else {
									uni.showModal({ content: result.msg, showCancel: false });
								}
							}
						});
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.editor {
	padding: 11px 0px 0px 0px;
	.cons {
		width: 100%;
		.toolbar {
			border: 1px solid #dadbde;
			border-bottom: 0px;
			background-color: whitesmoke;
			border-radius: 5px 5px 0px 0px;
			.icon {
				display: inline-block;
				cursor: pointer;
				font-size: 20px;
				padding: 6px 6px;
				width: 23px;
				height: 23px;
			}
			.ql-active {
				color: #06c;
			}
		}
		.ql-container {
			padding: 10px;
			border: 1px solid #dadbde;
			font-size: 15px;
			background-color: white;
			border-radius: 0px 0px 5px 5px;
			image {
				width: 100%;
			}
		}
	}
}
</style>