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.
Methods
blur
The editor goes out of focus while the keyboard is put away.
(option?: BlurOption) => void
Property | Type |
---|---|
option | BlurOption |
API Support
API | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
EditorContext.blur | ✔️ |
clear
Clears the editor.
(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.
(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.
(option?: GetContentsOption) => void
Property | Type |
---|---|
option | GetContentsOption |
API Support
API | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
EditorContext.getContents | ✔️ |
insertDivider
Inserts a divider.
(option?: InsertDividerOption) => void
Property | Type |
---|---|
option | InsertDividerOption |
API Support
API | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
EditorContext.insertDivider | ✔️ |
insertImage
Inserts an image.
(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.
(option: InsertTextOption) => void
Property | Type |
---|---|
option | InsertTextOption |
API Support
API | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
EditorContext.insertText | ✔️ |
redo
Redoes the operation.
(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.
(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.
() => 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.
(option: SetContentsOption) => void
Property | Type |
---|---|
option | SetContentsOption |
API Support
API | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
EditorContext.setContents | ✔️ |
undo
Undoes the operation.
(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 | ✔️ |