title: EditorContext
sidebar_label: EditorContext
EditorContext
实例,可通过 Taro.createSelectorQuery
获取。
EditorContext
通过 id
跟一个 editor
组件绑定,操作对应的 editor
组件。
参考文档
方法
blur
编辑器失焦,同时收起键盘。
参考文档
(option?: BlurOption) => void
API 支持度
API |
微信小程序 |
H5 |
React Native |
EditorContext.blur |
✔️ |
|
clear
清空编辑器内容
参考文档
(option?: ClearOption) => void
API 支持度
API |
微信小程序 |
H5 |
React Native |
EditorContext.clear |
✔️ |
|
format
修改样式
支持设置的样式列表
name |
value |
bold |
|
italic |
|
underline |
|
strike |
|
ins |
|
script |
sub / super |
header |
H1 / H2 / h3 / H4 / h5 / H6 |
align |
left / center / right / justify |
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 |
对已经应用样式的选区设置会取消样式。css style 表示 css 中规定的允许值。
参考文档
(name: string, value?: string) => void
参数 |
类型 |
说明 |
name |
string |
属性 |
value |
string |
值 |
API 支持度
API |
微信小程序 |
H5 |
React Native |
EditorContext.format |
✔️ |
|
getContents
获取编辑器内容
参考文档
(option?: GetContentsOption) => void
参数 |
类型 |
option |
GetContentsOption |
API 支持度
API |
微信小程序 |
H5 |
React Native |
EditorContext.getContents |
✔️ |
|
insertDivider
插入分割线
参考文档
(option?: InsertDividerOption) => void
参数 |
类型 |
option |
InsertDividerOption |
API 支持度
API |
微信小程序 |
H5 |
React Native |
EditorContext.insertDivider |
✔️ |
|
insertImage
插入图片。
地址为临时文件时,获取的编辑器html格式内容中 <img>
标签增加属性 data-local,delta 格式内容中图片 attributes 属性增加 data-local 字段,该值为传入的临时文件地址。
开发者可选择在提交阶段上传图片到服务器,获取到网络地址后进行替换。替换时对于html内容应替换掉 <img>
的 src 值,对于 delta 内容应替换掉 insert { image: abc }
值。
参考文档
(option: InsertImageOption) => void
参数 |
类型 |
option |
InsertImageOption |
示例代码
this.editorCtx.insertImage({
src: 'xx',
width: '100px',
height: '50px',
extClass: className
})
API 支持度
API |
微信小程序 |
H5 |
React Native |
EditorContext.insertImage |
✔️ |
|
insertText
覆盖当前选区,设置一段文本
参考文档
(option: InsertTextOption) => void
参数 |
类型 |
option |
InsertTextOption |
API 支持度
API |
微信小程序 |
H5 |
React Native |
EditorContext.insertText |
✔️ |
|
redo
恢复
参考文档
(option?: RedoOption) => void
API 支持度
API |
微信小程序 |
H5 |
React Native |
EditorContext.redo |
✔️ |
|
removeFormat
清除当前选区的样式
参考文档
(option?: RemoveFormatOption) => void
参数 |
类型 |
option |
RemoveFormatOption |
API 支持度
API |
微信小程序 |
H5 |
React Native |
EditorContext.removeFormat |
✔️ |
|
scrollIntoView
使得编辑器光标处滚动到窗口可视区域内。
参考文档
() => void
API 支持度
API |
微信小程序 |
H5 |
React Native |
EditorContext.scrollIntoView |
✔️ |
|
setContents
初始化编辑器内容,html和delta同时存在时仅delta生效
参考文档
(option: SetContentsOption) => void
参数 |
类型 |
option |
SetContentsOption |
API 支持度
API |
微信小程序 |
H5 |
React Native |
EditorContext.setContents |
✔️ |
|
undo
撤销
参考文档
(option?: UndoOption) => void
API 支持度
API |
微信小程序 |
H5 |
React 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
参数 |
类型 |
必填 |
说明 |
src |
string |
是 |
图片地址,仅支持 http(s)、base64、云图片(2.8.0)、临时文件(2.8.3)。 |
alt |
string |
否 |
图像无法显示时的替代文本 |
complete |
(res: CallbackResult) => void |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
data |
Record<string, any> |
否 |
data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上 |
extClass |
string |
否 |
添加到图片 img 标签上的类名 |
fail |
(res: CallbackResult) => void |
否 |
接口调用失败的回调函数 |
height |
string |
否 |
图片高度 (pixels/百分比) |
success |
(res: CallbackResult) => void |
否 |
接口调用成功的回调函数 |
width |
string |
否 |
图片宽度(pixels/百分比) |
InsertTextOption
参数 |
类型 |
必填 |
说明 |
complete |
(res: CallbackResult) => void |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
fail |
(res: CallbackResult) => void |
否 |
接口调用失败的回调函数 |
success |
(res: CallbackResult) => void |
否 |
接口调用成功的回调函数 |
text |
string |
否 |
文本内容 |
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 |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
delta |
Record<string, any> |
否 |
表示内容的delta对象 |
fail |
(res: CallbackResult) => void |
否 |
接口调用失败的回调函数 |
html |
string |
否 |
带标签的HTML内容 |
success |
(res: CallbackResult) => void |
否 |
接口调用成功的回调函数 |
UndoOption
参数 |
类型 |
必填 |
说明 |
complete |
(res: CallbackResult) => void |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
fail |
(res: CallbackResult) => void |
否 |
接口调用失败的回调函数 |
success |
(res: CallbackResult) => void |
否 |
接口调用成功的回调函数 |
API 支持度
API |
微信小程序 |
H5 |
React 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 |
✔️ |
|
|