Skip to main content
Version: 3.x

EditorContext

EditorContext 实例,可通过 Taro.createSelectorQuery 获取。 EditorContext 通过 id 跟一个 editor 组件绑定,操作对应的 editor 组件。

参考文档

方法#

blur#

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

参考文档

(option?: BlurOption) => void
参数类型
optionBlurOption

API 支持度#

API微信小程序H5React Native
EditorContext.blur✔️

clear#

清空编辑器内容

参考文档

(option?: ClearOption) => void
参数类型
optionClearOption

API 支持度#

API微信小程序H5React Native
EditorContext.clear✔️

format#

修改样式


支持设置的样式列表#

namevalue
bold
italic
underline
strike
ins
scriptsub / super
headerH1 / H2 / h3 / H4 / h5 / H6
alignleft / center / right / justify
directionrtl
indent-1 / +1
listordered / bullet / check
colorhex color
backgroundColorhex color
margin/marginTop/marginBottom/marginLeft/marginRightcss style
padding/paddingTop/paddingBottom/paddingLeft/paddingRightcss style
font/fontSize/fontStyle/fontVariant/fontWeight/fontFamilycss style
lineHeightcss style
letterSpacingcss style
textDecorationcss style
textIndentcss style

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

参考文档

(name: string, value?: string) => void
参数类型说明
namestring属性
valuestring

API 支持度#

API微信小程序H5React Native
EditorContext.format✔️

getContents#

获取编辑器内容

参考文档

(option?: GetContentsOption) => void
参数类型
optionGetContentsOption

API 支持度#

API微信小程序H5React Native
EditorContext.getContents✔️

insertDivider#

插入分割线

参考文档

(option?: InsertDividerOption) => void
参数类型
optionInsertDividerOption

API 支持度#

API微信小程序H5React Native
EditorContext.insertDivider✔️

insertImage#

插入图片。

地址为临时文件时,获取的编辑器html格式内容中 <img> 标签增加属性 data-local,delta 格式内容中图片 attributes 属性增加 data-local 字段,该值为传入的临时文件地址。

开发者可选择在提交阶段上传图片到服务器,获取到网络地址后进行替换。替换时对于html内容应替换掉 <img> 的 src 值,对于 delta 内容应替换掉 insert { image: abc } 值。

参考文档

(option: InsertImageOption) => void
参数类型
optionInsertImageOption

示例代码#

this.editorCtx.insertImage({
src: 'xx',
width: '100px',
height: '50px',
extClass: className
})

API 支持度#

API微信小程序H5React Native
EditorContext.insertImage✔️

insertText#

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

参考文档

(option: InsertTextOption) => void
参数类型
optionInsertTextOption

API 支持度#

API微信小程序H5React Native
EditorContext.insertText✔️

redo#

恢复

参考文档

(option?: RedoOption) => void
参数类型
optionRedoOption

API 支持度#

API微信小程序H5React Native
EditorContext.redo✔️

removeFormat#

清除当前选区的样式

参考文档

(option?: RemoveFormatOption) => void
参数类型
optionRemoveFormatOption

API 支持度#

API微信小程序H5React Native
EditorContext.removeFormat✔️

scrollIntoView#

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

参考文档

() => void

API 支持度#

API微信小程序H5React Native
EditorContext.scrollIntoView✔️

setContents#

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

参考文档

(option: SetContentsOption) => void
参数类型
optionSetContentsOption

API 支持度#

API微信小程序H5React Native
EditorContext.setContents✔️

undo#

撤销

参考文档

(option?: UndoOption) => void
参数类型
optionUndoOption

API 支持度#

API微信小程序H5React Native
EditorContext.undo✔️

参数#

BlurOption#

参数类型必填说明
complete(res: CallbackResult) => void接口调用结束的回调函数(调用成功、失败都会执行)
fail(res: CallbackResult) => void接口调用失败的回调函数
success(res: CallbackResult) => void接口调用成功的回调函数

ClearOption#

参数类型必填说明
complete(res: CallbackResult) => void接口调用结束的回调函数(调用成功、失败都会执行)
fail(res: CallbackResult) => void接口调用失败的回调函数
success(res: CallbackResult) => void接口调用成功的回调函数

GetContentsOption#

参数类型必填说明
complete(res: CallbackResult) => void接口调用结束的回调函数(调用成功、失败都会执行)
fail(res: CallbackResult) => void接口调用失败的回调函数
success(res: CallbackResult) => void接口调用成功的回调函数

InsertDividerOption#

参数类型必填说明
complete(res: CallbackResult) => void接口调用结束的回调函数(调用成功、失败都会执行)
fail(res: CallbackResult) => void接口调用失败的回调函数
success(res: CallbackResult) => void接口调用成功的回调函数

InsertImageOption#

参数类型必填说明
srcstring图片地址,仅支持 http(s)、base64、云图片(2.8.0)、临时文件(2.8.3)。
altstring图像无法显示时的替代文本
complete(res: CallbackResult) => void接口调用结束的回调函数(调用成功、失败都会执行)
dataRecord<string, any>data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上
extClassstring添加到图片 img 标签上的类名
fail(res: CallbackResult) => void接口调用失败的回调函数
heightstring图片高度 (pixels/百分比)
success(res: CallbackResult) => void接口调用成功的回调函数
widthstring图片宽度(pixels/百分比)

InsertTextOption#

参数类型必填说明
complete(res: CallbackResult) => void接口调用结束的回调函数(调用成功、失败都会执行)
fail(res: CallbackResult) => void接口调用失败的回调函数
success(res: CallbackResult) => void接口调用成功的回调函数
textstring文本内容

RedoOption#

参数类型必填说明
complete(res: CallbackResult) => void接口调用结束的回调函数(调用成功、失败都会执行)
fail(res: CallbackResult) => void接口调用失败的回调函数
success(res: CallbackResult) => void接口调用成功的回调函数

RemoveFormatOption#

参数类型必填说明
complete(res: CallbackResult) => void接口调用结束的回调函数(调用成功、失败都会执行)
fail(res: CallbackResult) => void接口调用失败的回调函数
success(res: CallbackResult) => void接口调用成功的回调函数

SetContentsOption#

参数类型必填说明
complete(res: CallbackResult) => void接口调用结束的回调函数(调用成功、失败都会执行)
deltaRecord<string, any>表示内容的delta对象
fail(res: CallbackResult) => void接口调用失败的回调函数
htmlstring带标签的HTML内容
success(res: CallbackResult) => void接口调用成功的回调函数

UndoOption#

参数类型必填说明
complete(res: CallbackResult) => void接口调用结束的回调函数(调用成功、失败都会执行)
fail(res: CallbackResult) => void接口调用失败的回调函数
success(res: CallbackResult) => void接口调用成功的回调函数

API 支持度#

API微信小程序H5React Native
EditorContext.blur✔️
EditorContext.clear✔️
EditorContext.format✔️
EditorContext.getContents✔️
EditorContext.insertDivider✔️
EditorContext.insertImage✔️
EditorContext.insertText✔️
EditorContext.redo✔️
EditorContext.removeFormat✔️
EditorContext.scrollIntoView✔️
EditorContext.setContents✔️
EditorContext.undo✔️