EditorContext

The EditorContext instance can be obtained via Taro.createSelectorQuery.

EditorContext is bound to an editor component with an id, to work with the editor component.

Reference

Methods

blur

The editor goes out of focus while the keyboard is put away.

Reference

(option?: BlurOption) => void

Property	Type
option	BlurOption

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.blur	✔️

clear

Clears the editor.

Reference

(option?: ClearOption) => void

Property	Type
option	ClearOption

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.clear	✔️

format

Modifies the style.

---

List of Available Styles

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

When you set for an area with a style applied, this action will disable the current style. css style indicates valid values in css.

Reference

(name: string, value?: string) => void

Property	Type	Description
name	string	Property
value	string	Value

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.format	✔️

getContents

Gets the editor content.

Reference

(option?: GetContentsOption) => void

Property	Type
option	GetContentsOption

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.getContents	✔️

insertDivider

Inserts a divider.

Reference

(option?: InsertDividerOption) => void

Property	Type
option	InsertDividerOption

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.insertDivider	✔️

insertImage

Inserts an image.

Reference

(option: InsertImageOption) => void

Property	Type
option	InsertImageOption

Sample Code

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

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.insertImage	✔️

insertText

Covers and sets the text for the selected area.

Reference

(option: InsertTextOption) => void

Property	Type
option	InsertTextOption

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.insertText	✔️

redo

Redoes the operation.

Reference

(option?: RedoOption) => void

Property	Type
option	RedoOption

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.redo	✔️

removeFormat

Clears the style of the selected area.

Reference

(option?: RemoveFormatOption) => void

Property	Type
option	RemoveFormatOption

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.removeFormat	✔️

scrollIntoView

Causes the editor cursor to scroll into the visible area of the window.

Reference

() => void

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.scrollIntoView	✔️

setContents

Initializes the editor content. Only delta takes effect when both html and delta exist.

Reference

(option: SetContentsOption) => void

Property	Type
option	SetContentsOption

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.setContents	✔️

undo

Undoes the operation.

Reference

(option?: UndoOption) => void

Property	Type
option	UndoOption

API Support

API	WeChat Mini-Program	H5	React Native
EditorContext.undo	✔️

Parameters

BlurOption

Property	Type	Required	Description
complete	(res: any) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: any) => void	No	The callback function for a failed API call
success	(res: Result) => void	No	The callback function for a successful API call

ClearOption

Property	Type	Required	Description
complete	(res: any) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: any) => void	No	The callback function for a failed API call
success	(res: Result) => void	No	The callback function for a successful API call

GetContentsOption

Property	Type	Required	Description
complete	(res: any) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: any) => void	No	The callback function for a failed API call
success	(res: Result) => void	No	The callback function for a successful API call

InsertDividerOption

Property	Type	Required	Description
complete	(res: any) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: any) => void	No	The callback function for a failed API call
success	(res: Result) => void	No	The callback function for a successful API call

InsertImageOption

Property	Type	Required	Description
src	string	Yes	Image address
alt	string	No	Text displayed when the image cannot be displayed
data	Record<string, any>	No	data is serialized in the format of name=value;name1=value2 and bound to the data-custom property.
extClass	string	No	The class name added to the image img tag.
height	string	No	The height of image
width	string	No	The width of image
complete	(res: any) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: any) => void	No	The callback function for a failed API call
success	(res: Result) => void	No	The callback function for a successful API call

InsertTextOption

Property	Type	Required	Description
text	string	No	Text content
complete	(res: any) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: any) => void	No	The callback function for a failed API call
success	(res: Result) => void	No	The callback function for a successful API call

RedoOption

Property	Type	Required	Description
complete	(res: any) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: any) => void	No	The callback function for a failed API call
success	(res: Result) => void	No	The callback function for a successful API call

RemoveFormatOption

Property	Type	Required	Description
complete	(res: any) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: any) => void	No	The callback function for a failed API call
success	(res: Result) => void	No	The callback function for a successful API call

SetContentsOption

Property	Type	Required	Description
delta	Record<string, any>	No	delta object which shows the content
html	string	No	HTML content that contains tags
complete	(res: any) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: any) => void	No	The callback function for a failed API call
success	(res: Result) => void	No	The callback function for a successful API call

UndoOption

Property	Type	Required	Description
complete	(res: any) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: any) => void	No	The callback function for a failed API call
success	(res: Result) => void	No	The callback function for a successful API call

API Support

API	WeChat Mini-Program	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	✔️