使用uni-app editor富文本组件设置富文本内容及解决@Ready先于onload执行，无法获取后端接口数据的问题

开始使用富文本组件editor时，不知如何调用相关API设置富文本内容和获取内容，本文将举例详解

目录

一.了解editor组件的常用属性及相关API

1.属性常用说明 

 2.富文本相关API说明

1）editorContext

2） editorContext.setContents(OBJECT)

3）editorContext.getContents(OBJECT) 

二. 使用@ready属性，设置富文本初始内容为后端接口内容                  

 1.onLoad获取后端接口数据

注意：这里设置了一个标示isDataLoaded（默认为false) ，用来确保先获得后端的数据

2.@ready="onEditorReady",编写onEditorReady方法，富文本初始加载数据

3.@input="onEditorInput",编写onEditorInput方法，富文本内容改变时触发

一.了解editor组件的常用属性及相关API

<editor
    id="editor"
    placeholder="开始输入..."
    showImgSize
    showImgToolbar
    showImgResize
	@ready="onEditorReady"
	@input="onEditorInput"
></editor>

1.属性常用说明 

 2.富文本相关API说明

1）editorContext

editor 组件对应的 editorContext 实例，可通过 uni.createSelectorQuery 获取。

	onEditorReady() {
		uni.createSelectorQuery().select('#editor').context((res) => {
			this.editorCtx = res.context
		}).exec()
	}

2） editorContext.setContents(OBJECT)

初始化编辑器内容，html和delta同时存在时仅delta生效

OBJECT 参数说明

3）editorContext.getContents(OBJECT) 

获取编辑器内容

OBJECT 参数说明

object.success 回调函数

二. 使用@ready属性，设置富文本初始内容为后端接口内容                  

 1.onLoad获取后端接口数据

注意：这里设置了一个标示isDataLoaded（默认为false) ，用来确保先获得后端的数据

2.@ready="onEditorReady",编写onEditorReady方法，富文本初始加载数据

说明：①调用初始化方法，目的是创建editor组件对应的 editorContext (实例上下文)

           ②调用设置富文本内容的方法

           ③若获取了后端的数据，调用setContents设置富文本内容

           ④若没有获取到，则使用定时器，0.001s后重试

测试：启动后端和前端，前端运行界面如下---->

3.@input="onEditorInput",编写onEditorInput方法，富文本内容改变时触发

说明：① 调用获取富文本内容方法getContents

           ②在回调函数中，设置后端内容=富文本的内容