Skip to main content
Version: Next

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
PropertyType
optionBlurOption

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.blur✔️

clear

Clears the editor.

Reference

(option?: ClearOption) => void
PropertyType
optionClearOption

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.clear✔️

format

Modifies the style.


List of Available Styles

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

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
PropertyTypeDescription
namestringProperty
valuestringValue

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.format✔️

getContents

Gets the editor content.

Reference

(option?: GetContentsOption) => void
PropertyType
optionGetContentsOption

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.getContents✔️

insertDivider

Inserts a divider.

Reference

(option?: InsertDividerOption) => void
PropertyType
optionInsertDividerOption

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.insertDivider✔️

insertImage

Inserts an image.

Reference

(option: InsertImageOption) => void
PropertyType
optionInsertImageOption

Sample Code

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

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.insertImage✔️

insertText

Covers and sets the text for the selected area.

Reference

(option: InsertTextOption) => void
PropertyType
optionInsertTextOption

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.insertText✔️

redo

Redoes the operation.

Reference

(option?: RedoOption) => void
PropertyType
optionRedoOption

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.redo✔️

removeFormat

Clears the style of the selected area.

Reference

(option?: RemoveFormatOption) => void
PropertyType
optionRemoveFormatOption

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.removeFormat✔️

scrollIntoView

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

Reference

() => void

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.scrollIntoView✔️

setContents

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

Reference

(option: SetContentsOption) => void
PropertyType
optionSetContentsOption

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.setContents✔️

undo

Undoes the operation.

Reference

(option?: UndoOption) => void
PropertyType
optionUndoOption

API Support

APIWeChat Mini-ProgramH5React Native
EditorContext.undo✔️

Parameters

BlurOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

ClearOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

GetContentsOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

InsertDividerOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

InsertImageOption

PropertyTypeRequiredDescription
srcstringYesImage address
altstringNoText displayed when the image cannot be displayed
dataRecord<string, any>Nodata is serialized in the format of name=value;name1=value2 and bound to the data-custom property.
extClassstringNoThe class name added to the image img tag.
heightstringNoThe height of image
widthstringNoThe width of image
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

InsertTextOption

PropertyTypeRequiredDescription
textstringNoText content
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

RedoOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

RemoveFormatOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

SetContentsOption

PropertyTypeRequiredDescription
deltaRecord<string, any>Nodelta object which shows the content
htmlstringNoHTML content that contains tags
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

UndoOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

API Support

APIWeChat Mini-ProgramH5React 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✔️