editorContext

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

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

百度小程序 Editor 富文本编辑器动态库提供了 createEditorContext 的方法来获取。

	onEditorReady() {
		this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
	}

editorContext 通过 id 跟一个 <editor> 组件绑定，操作对应的 <editor> 组件。

平台差异说明

|App|HarmonyOS Next|H5 |微信小程序 |支付宝小程序 |百度小程序 |抖音小程序、飞书小程序 |QQ小程序 |快手小程序|京东小程序| |:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: | |√ |4.23|2.4.5+ |√ |x |需引入动态库 |x |x |x |x |

百度小程序引入动态库

1. 在项目中引用动态库，在 manifest.json 中增添一项 dynamicLib

	"mp-baidu" : {
		"appid" : "",
		"setting" : {
			"urlCheck" : true
		},
		"dynamicLib": {//引入百度小程序动态库
			"editorLib": {
				"provider": "swan-editor"
			}
		}
	}

2. 在每个使用到富文本编辑器组件的页面，配置 pages.json 文件如下：

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"usingComponents": {
					"editor": "dynamicLib://editorLib/editor"
				}
			}
		}
	]
}

editorContext.format(name, value)

修改样式

参数	类型	说明
name	String	属性
value	String	值

支持设置的样式列表

name	value	平台差异说明
bold
italic
underline
strike
ins
script	sub / super
header	H1 / H2 / h3 / H4 / h5 / H6
align	left / center / right / justify	left百度小程序不支持
direction	rtl
indent	-1 / +1
list	ordered / bullet / check
color	hex color
backgroundColor	hex color
margin/marginTop/marginBottom/marginLeft/marginRight	css style	百度小程序不支持
padding/paddingTop/paddingBottom/paddingLeft/paddingRight	css style	百度小程序不支持
font/fontSize/fontStyle/fontVariant/fontWeight/fontFamily	css style	百度小程序不支持
lineHeight	css style	百度小程序不支持
letterSpacing	css style	百度小程序不支持
textDecoration	css style	百度小程序不支持
textIndent	css style	百度小程序不支持
wordWrap	css style	百度小程序不支持
wordBreak	css style	百度小程序不支持
whiteSpace	css style	百度小程序不支持

对已经应用样式的选区设置会取消样式。css style 表示 css 中规定的允许值。

editorContext.insertDivider(OBJECT)

插入分割线

OBJECT 参数说明

属性	类型	默认值	必填	说明
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.insertImage(OBJECT)

插入图片。

微信小程序平台地址为临时文件时，获取的编辑器html格式内容中 <img> 标签增加属性 data-local，delta 格式内容中图片 attributes 属性增加 data-local 字段，该值为传入的临时文件地址。 开发者可选择在提交阶段上传图片到服务器，获取到网络地址后进行替换。替换时对于html内容应替换掉 <img> 的 src 值，对于 delta 内容应替换掉 insert { image: abc } 值。

OBJECT 参数说明

属性	类型	默认值	必填	说明
src	String		是	图片地址，仅支持 http(s)、base64、本地图片
alt	String		否	图像无法显示时的替代文本
width	String		否	图片宽度（pixels/百分比），2.6.5+ 支持，百度小程序不支持
height	String		否	图片高度 (pixels/百分比），2.6.5+ 支持，百度小程序不支持
extClass	String		否	添加到图片 img 标签上的类名，2.6.5+ 支持
data	Object		否	data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上，2.6.5+ 支持
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.insertText(OBJECT)

覆盖当前选区，设置一段文本

OBJECT 参数说明

属性	类型	默认值	必填	说明
text	String		否	文本内容
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.setContents(OBJECT)

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

OBJECT 参数说明

属性	类型	默认值	必填	说明
html	String		否	带标签的HTML内容
delta	Object		否	表示内容的delta对象
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.getContents(OBJECT)

获取编辑器内容

OBJECT 参数说明

属性	类型	默认值	必填	说明
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

属性	类型	说明
html	string	带标签的 HTML 内容
text	string	纯文本内容
delta	Object	表示内容的 delta 对象

editorContext.clear(OBJECT)

清空编辑器内容

OBJECT 参数说明

属性	类型	默认值	必填	说明
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.removeFormat(OBJECT)

清除当前选区的样式

OBJECT 参数说明

属性	类型	默认值	必填	说明
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.undo(OBJECT)

撤销

OBJECT 参数说明

属性	类型	默认值	必填	说明
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.redo(OBJECT)

恢复

OBJECT 参数说明

属性	类型	默认值	必填	说明
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.blur(OBJECT)

编辑器失焦，同时收起键盘。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序
√HBuilderX 3.0.3	√HBuilderX 3.0.3	√基础库2.8.3	x	√	x	x	x	x

OBJECT 参数说明

属性	类型	默认值	必填	说明
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.scrollIntoView(OBJECT)

使得编辑器光标处滚动到窗口可视区域内。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序
√HBuilderX 3.0.3	√HBuilderX 3.0.3	√基础库2.8.3	x	√	x	x	x	x

OBJECT 参数说明

属性	类型	默认值	必填	说明
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.getSelectionText(OBJECT)

获取编辑器已选区域内的纯文本内容。当编辑器失焦或未选中一段区间时，返回内容为空。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序
√HBuilderX 3.0.3	√HBuilderX 3.0.3	√基础库2.10.2	x	√	x	x	x	x

OBJECT 参数说明

属性	类型	默认值	必填	说明
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明：

参数	类型	说明
errMsg	String	接口调用结果（百度小程序不支持）
text	String	纯文本内容