uniapp——H5中使用富文本编辑器，如何使用。

一、插件市场

去插件市场找到这个插件https://ext.dcloud.net.cn/plugin?id=14726

二、引入

找到自己项目引入

项目里面多了很多文件

三、使用

找到A页面，在里面引入组件

<view class="editBox">
	<sp-editor @exportHtml="handleExportHtml" ref="editor"></sp-editor>
	<button @click="save">打印</button>	
</view>

.editBox {
	min-height: 30vh;
}

具体如下：
A页面：

export default {
		data() {
			return {
				rich_agreement: '<b>你好</b>', //富文本协议
			};
		},
		 mounted() {
		    // 使用固定的 HTML 内容
		    const fixedHtmlContent = `
		      <p><strong>欢迎使用富文本编辑器！</strong></p>
		      <p>这是一个示例文本，您可以在这里编辑内容。</p>
		      <ul>
		          <li>列表项 1</li>
		          <li>列表项 2</li>
		          <li>列表项 3</li>
		      </ul>
		      <p>您还可以添加 <a href="https://example.com">链接</a> 和其他格式。</p>
		      <p style="color: red;">这是一个红色的文本。</p>
		    `;
		    this.$refs.editor.setEditorContent(fixedHtmlContent); // 设置编辑器内容
		  },
		onLoad(e) {},
		methods: {
			handleExportHtml(htmlContent, editorId) {
				console.log('导出的HTML内容222222:', htmlContent);
				// 这里可以处理导出的内容，例如保存到服务器或显示在页面上
				this.rich_agreement = htmlContent
			},
			//打印输入的内容
			save() {
				this.$refs.editor.exportHtml()
			},
		}
	}
</script>

组件新增：

setEditorContent(content) {
	if (this.editorCtx) {
		this.editorCtx.setContents({
			html: content // 设置编辑器内容
		});
	}
},

四、真实数据处理

A页面：

export default {
		data() {
			return {
				rich_agreement: '', //富文本协议
			};
		},
		onLoad(e) {
			if (e.data) {
				let data = JSON.parse(e.data)
				this.rich_agreement = data.recharge_agreement
				// 在这里设置编辑器内容
				this.$nextTick(() => {
					setTimeout(() => { //加一个延迟
						if (this.$refs.editor) {
							this.$refs.editor.setEditorContent(this.rich_agreement);
						} else {
							console.error("Editor reference is not defined.");
						}
					}, 800);
				});
			}
		},
		methods: {
			handleExportHtml(htmlContent, editorId) {
				console.log('导出的HTML内容222222:', htmlContent);
				// 这里可以处理导出的内容，例如保存到服务器或显示在页面上
				this.rich_agreement = htmlContent
			},
			//打印输入的内容
			save() {
				this.$refs.editor.exportHtml()//先调用一下
				common.request('post', '/agent/options/addOperatorChargePackage', {
					id: this.id,
					recharge_agreement: this.rich_agreement, //富文本协议
				}).then(res => {
					if (res.code == 1) {
					}
				})
			},
		}
	}
</script>

组件新增：

setEditorContent(content) {
	if (this.editorCtx) {
		this.editorCtx.setContents({
			html: content // 设置编辑器内容
		});
	}
},