uni-app整合富文本编辑器（包含图片上传服务端功能）

html部分

toolbar里是控件，根据需要保留即可

<div class="content">

	<div class='toolbar' @tap="format">
		<div :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></div>
		<div :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></div>
		<div :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></div>
		<div :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></div>
		<div :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align"
		 data-value="left"></div>
		<div :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align"
		 data-value="center"></div>

		<div class="iconfont icon-fengexian" @tap="insertdivider"></div>
		<div class="iconfont icon-charutupian" @tap="insertimage"></div>
		<div :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header"
		 :data-value="1"></div>
		<div :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script"
		 data-value="sub"></div>
		<div :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script"
		 data-value="super"></div>
		<div class="iconfont icon-shanchu" @tap="clear"></div>
		<div :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction"
		 data-value="rtl"></div>
	</div>

	<div class=".uni-form-item uni-column">
		<input class="my-uni-input" maxlength="20" placeholder="标题" @input="settitle" />
	</div>
	
	<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="oneditorready" @statuschange="onstatuschange"></editor>
</div>

JS部分

methods: {
	//撤销、重做这些不需要可以不写
	undo() {
		this.editorCtx.undo()
	},
	
	redo() {
		this.editorCtx.redo()
	},
	
	format(e) {
		let {
			name,
			value
		} = e.target.dataset
		if (!name) return
		// console.log('format', name, value)
		this.editorCtx.format(name, value)
	},
	
	onEditorReady() {
		uni.createSelectorQuery().select('#editor').context((res) => {
			this.editorCtx = res.context
		}).exec()
	},
	
	insertImage() {
		var that = this;
		uni.chooseImage({ 
			sizeType: ['original', 'compressed'], 
			sourceType: ['album', 'camera'], 
			success(res) { 
				console.log(res.tempFilePaths[0])
				uni.uploadFile({   
					url: 'http://0.0.0.0/file/upload-img', //域名+上传文件的请求接口 (根据你实际的接口来)       
					filePath: res.tempFilePaths[0], // tempFilePath可以作为img标签的src属性显示图片 服务器图片的路径         
					name: 'img', //上传到服务器的参数，自定义
					header: {
						"Content-Type": "multipart/form-data"
					},          
					success(res) {
						var data = JSON.parse(res.data)
						that.editorCtx.insertImage({
							width: '100%', //设置宽度为100%防止宽度溢出手机屏幕
							height: 'auto',
							src: data.url, //服务端返回的url
							alt: '图像',
							success: function() {
								console.log('insert image success')
							}
						})
						console.log(that.editorCtx)
					}
				})
			}
		})
	},
	
	//发表文章
	publish_article() {
		var that = this;
		//获取编辑器内容后，调用你自己的服务器接口
		that.editorCtx.getContents({
			success: function(data) {
				let obj = { // 创建对象
					url: 'article/save', //
					method: "post",
					data: {
						id: that.id,
						content: data.html,
						title: that.title
					},
					success: (res) => {
						console.log(res)
						wx.showToast({
							title: '发表成功',
							icon: 'success',
							duration: 2000,
							success: function() {
								const url = "index";
								console.log(url)
								uni.redirectTo({
									url: url
								});
							}
						})
					}
				}
				that.$apiRequest.post(obj); // 调用你自己的发表文章接口
			}
		})
	}
}

css部分

.ql-container {
	box-sizing: border-box;
	padding: 12px 15px;
	width: 100%;
	min-height: 30vh;
	height: auto;
	background: #fff;
	font-size: 16px;
	line-height: 1.5;
}

.ql-active {
	color: #06c;
}

.iconfont {
		display: inline-block;
		padding: 8px 8px;
		width: 24px;
		height: 24px;
		cursor: pointer;
		font-size: 20px;
}
	
.toolbar {
	box-sizing: border-box;
	border-bottom: 0;
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

最终效果