title: EditorContext

sidebar_label: 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

  1. (option?: BlurOption) => void
Property Type
option BlurOption

API Support

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

clear

Clears the editor.

Reference

  1. (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

  1. (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

  1. (option?: GetContentsOption) => void
Property Type
option GetContentsOption

API Support

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

insertDivider

Inserts a divider.

Reference

  1. (option?: InsertDividerOption) => void
Property Type
option InsertDividerOption

API Support

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

insertImage

Inserts an image.

Reference

  1. (option: InsertImageOption) => void
Property Type
option InsertImageOption

Sample Code

  1. this.editorCtx.insertImage({
  2.   src: 'xx',
  3.   width: '100px',
  4.   height: '50px',
  5.   extClass: className
  6. })

API Support

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

insertText

Covers and sets the text for the selected area.

Reference

  1. (option: InsertTextOption) => void
Property Type
option InsertTextOption

API Support

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

redo

Redoes the operation.

Reference

  1. (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

  1. (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

  1. () => 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

  1. (option: SetContentsOption) => void
Property Type
option SetContentsOption

API Support

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

undo

Undoes the operation.

Reference

  1. (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 ✔️