一、插件市场

去插件市场找到这个插件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 // 设置编辑器内容});}
},