【uniCloud】admin-02 使用富文本插件wangEditor

0、安装

npm i wangeditor --save

1、添加编辑器标签

<view id="wangeditor"></view>

2、添加引用

import E from 'wangeditor'

3、添加配置

3.1 取消自动 focus

editor.config.focus = false

3.2 事件监听onblur、onfocus

editor.config.onblur = function(newHtml) {
	console.log('onblur', newHtml) // 获取最新的 html 内容
}
editor.config.onfocus = function(newHtml) {
	console.log('onfocus', newHtml) // 获取最新的 html 内容
}

3.2 事件监听onchange

// 配置 onchange 回调函数
const that = this
editor.config.onchange = function(newHtml) {
	console.log("change 之后最新的 html", newHtml);
	that.formData.content = newHtml
};
// 配置触发 onchange 的时间频率，默认为 200ms
editor.config.onchangeTimeout = 500; // 修改为 500ms

3.3 上传图片

// 本地上传图片
editor.config.uploadImgMaxSize = 1 * 1024 * 1024 // 默认限制图片大小是 5M
editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'] // 默认['jpg', 'jpeg', 'png', 'gif', 'bmp']
editor.config.customUploadImg = function(resultFiles, insertImgFn) {
	// resultFiles 是 input 中选中的文件列表
	// insertImgFn 是获取图片 url 后，插入到编辑器的方法
	resultFiles.forEach(async file => {
		let filePath = URL.createObjectURL(file)
		let cloudPath = file.name
		const result = await uniCloud.uploadFile({
			filePath,
			cloudPath
		});
		// 上传图片，返回结果，将图片插入到编辑器中
		insertImgFn(result.fileID)
	})
}

3.4 配置全部代码如下

initEditor() {
	editor = new E('#wangeditor')
	editor.config.zIndex = 0
	// 取消自动 focus
	editor.config.focus = false
	editor.config.onblur = function(newHtml) {
		console.log('onblur', newHtml) // 获取最新的 html 内容
	}
	editor.config.onfocus = function(newHtml) {
		console.log('onfocus', newHtml) // 获取最新的 html 内容
	}
	// 配置 onchange 回调函数
	const that = this
	editor.config.onchange = function(newHtml) {
		console.log("change 之后最新的 html", newHtml);
		that.formData.content = newHtml
	};
	// 配置触发 onchange 的时间频率，默认为 200ms
	editor.config.onchangeTimeout = 500; // 修改为 500ms

	// 本地上传图片
	editor.config.uploadImgMaxSize = 1 * 1024 * 1024 // 默认限制图片大小是 5M
	editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'] // 默认['jpg', 'jpeg', 'png', 'gif', 'bmp']
	editor.config.customUploadImg = function(resultFiles, insertImgFn) {
		// resultFiles 是 input 中选中的文件列表
		// insertImgFn 是获取图片 url 后，插入到编辑器的方法
		resultFiles.forEach(async file => {
			let filePath = URL.createObjectURL(file)
			let cloudPath = file.name
			const result = await uniCloud.uploadFile({
				filePath,
				cloudPath
			});
			// 上传图片，返回结果，将图片插入到编辑器中
			insertImgFn(result.fileID)
		})
	}
	editor.create()
},

4、完整代码

<template>
	<view class="uni-container">
		<uni-forms ref="form" :model="formData" validateTrigger="bind">
			<uni-forms-item name="content" label="内容" required>
				<view id="wangeditor">
				</view>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>
<script>
	import E from 'wangeditor'
	const db = uniCloud.database();
	const dbCmd = db.command;
	const dbCollectionName = 'test-content';
	let editor = null
	
	export default {
		data() {
			let formData = {
				"content": "",
			}
			return {
				formData,
			}
		},
		onLoad(e) {
			if (e.id) {
				const id = e.id
				this.formDataId = id
				this.getDetail(id)
			}
		},
		onReady() {
			this.initEditor()
		},
		methods: {
			/**
			 * 初始化富文本编辑器
			 */
			initEditor() {
				editor = new E('#wangeditor')
				editor.config.zIndex = 0
				// 取消自动 focus
				editor.config.focus = false
				editor.config.placeholder = '请填写内容'
				editor.config.onblur = function(newHtml) {
					console.log('onblur', newHtml) // 获取最新的 html 内容
				}
				editor.config.onfocus = function(newHtml) {
					console.log('onfocus', newHtml) // 获取最新的 html 内容
				}
				// 配置 onchange 回调函数
				const that = this
				editor.config.onchange = function(newHtml) {
					console.log("change 之后最新的 html", newHtml);
					that.formData.content = newHtml
				};
				// 本地上传图片
				editor.config.uploadImgMaxSize = 1 * 1024 * 1024 // 2M
				editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
				editor.config.customUploadImg = function(resultFiles, insertImgFn) {
					// resultFiles 是 input 中选中的文件列表
					// insertImgFn 是获取图片 url 后，插入到编辑器的方法
					resultFiles.forEach(async file => {
						let filePath = URL.createObjectURL(file)
						let cloudPath = file.name
						const result = await uniCloud.uploadFile({
							filePath,
							cloudPath
						});
						// 上传图片，返回结果，将图片插入到编辑器中
						insertImgFn(result.fileID)
					})
				}
				// 配置触发 onchange 的时间频率，默认为 200ms
				editor.config.onchangeTimeout = 500; // 修改为 500ms
				editor.create()
			},

			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection(dbCollectionName).doc(id).field("content").get().then((res) => {
					const data = res.result.data[0]
					if (data) {
						this.formData = data
						 editor.txt.html(this.formData.content)
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>