uniapp的简易富文本编辑框

这里是封装过的，

<template>
	<view class="content">
		<view class="editorBox">
			<view class="editorBar">
				<view class="display">
					<img src="@/static/image/myEditor/bold.png" alt="" @click="format('bold','')">
					<img src="@/static/image/myEditor/italic.png" alt="" @click="format('italic','')">
					<img src="@/static/image/myEditor/underline.png" alt="" @click="insertDivider">
					<img src="@/static/image/myEditor/alignRight.png" alt="" @click="format('align','left')">
					<img src="@/static/image/myEditor/alignCenter.png" alt="" @click="format('align','center')">
					<img src="@/static/image/myEditor/alignLeft.png" alt="" @click="format('align','right')">
					<img src="@/static/image/myEditor/alignJustify.png" alt="" @click="format('align','justify')">
					<img src="@/static/image/myEditor/orderedList.png" alt="" @click="format('list','ordered')">
					<img src="@/static/image/myEditor/insertImage.png" alt="" @click="insertImage">
					<span style="height: 20px;line-height: 20px;margin-left: 10px;" @click="undo">撤销</span>
					<span style="height: 20px;line-height: 20px;margin-left: 10px;" @click="getContents">保存</span>
				</view>
			</view>
			<editor :show-img-size="true" :show-img-resize="true" :show-img-toolbar="true" id="editor"
				class="ql-container" placeholder="请输入" @ready="onEditorReady"></editor>
		</view>
	</view>
</template>

<script>
	// 以下路径需根据项目实际情况填写
	export default {
		data() {
			return {
				editorCtx: null
			}
		},
		created() {
			// 这里可以防止在弹框中获取不到节点
			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select('#editor').context((res) => {
					console.log("热水", res);
					this.editorCtx = res.context
				}).exec()
			})
		},
		methods: {
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					// console.log("热水", res);
					this.editorCtx = res.context
				}).exec()
			},
			format(name, value) {
				this.editorCtx.format(name, value)
			},
			// 撤销
			undo() {
				this.editorCtx.undo()
			},
			// 插入下划线
			insertDivider() {
				console.log("下划线");
				this.editorCtx.insertDivider()
			},
			// 插入图片
			insertImage() {
				console.log("插入图片");
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log("图片地址", res);
						that.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							alt: "图片失效",
							extClass: "img",
							success: (res) => {
								console.log("图片成功", res);
							},
							fail: (res) => {
								console.log("图片失败", res);
							}
						})

					}
				});


			},
			// 获取编辑器内容
			getContents() {
				console.log("保存", this.editorCtx);
				this.editorCtx.getContents({
					success: (res) => {
						console.log("成功", res);
					},
					fail: (res) => {
						console.log("失败", res);
					}
				})
			}

		}
	}
</script>

<style>
	.editorBox {
		width: 100%;
		height: 254px;
		font-size: 14px;
		line-height: 24px;
	}

	.display {
		display: flex;
		padding: 12px 10px;
	}

	.display img {
		width: 20px;
		height: 20px;
		margin-right: 8px;
	}

	.editorBar {
		border: 1px solid #E5E5E5;
	}

	.ql-container {
		width: 100%;
		height: 200px;
		padding: 0 15px;
		border: 1px solid #E5E5E5;
		border-top: none;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>

editor (dcloud.net.cn)  官网的示例 ，可以在加功能

editorContext | uni-app官网 (dcloud.net.cn)