Skip to main content
Version: 3.x

Editor

Rich text editor that allows you to edit images and text.

The editor can export plain text and html that contains tags, and store data in the form of delta files.

When the content is set via the setContents API, the html inserted during content parsing may cause a parsing error due to some invalid tags. We recommend that the html inserted into Mini Programs be delta-formatted.

Some basic styles are introduced to the rich text component to ensure that the content is correctly displayed. These basic styles can be overwritten during development. To export html via the rich text component from other components or environments, you need to additionally introduce This Section of Styles, and maintain the structure.

Image controls take effect only during initialization.

Some HTML tags and inline styles are supported within the editor, class and id are not supported

Reference

Type

ComponentType<EditorProps>

Examples

class App extends Components {
state = {
placeholder: 'Please enter your nickname...'
}

editorReady = e => {
Taro.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
}

undo = e => {
this.editorCtx.undo()
}

render () {
return (
<View>
<Editor id='editor' className='editor' placeholder={this.state.placeholder} onReady={this.editorReady}></Editor>
<Button type='warn' onClick={this.undo}>Undo</Button>
</View>
)
}
}

EditorProps

PropertyTypeDefaultRequiredDescription
readOnlybooleanfalseNoSets the editor to read-only
placeholderstringNoPrompts information
showImgSizebooleanfalseNoDisplays the image size control when the image is tapped
showImgToolbarbooleanfalseNoDisplays the toolbar control when the image is tapped
showImgResizebooleanfalseNoDisplays the size change control when the image is tapped
onReadyBaseEventOrigFunction<any>NoTriggered after the editor is initialized
onFocusBaseEventOrigFunction<editorEventDetail>NoTriggered when the editor is focused.
event.detail = { html, text, delta }
onBlurBaseEventOrigFunction<editorEventDetail>NoTriggered when the editor is unfocused.
detail = { html, text, delta }
onInputBaseEventOrigFunction<editorEventDetail>NoTriggered when the editor content changes.
detail = { html, text, delta }
onStatuschangeBaseEventOrigFunction<any>NoTriggered when styles in the editor are changed via Context. It returns the styles that are set for the selected area.

Property Support

PropertyWeChat Mini-ProgramH5React Native
EditorProps.readOnly✔️
EditorProps.placeholder✔️
EditorProps.showImgSize✔️
EditorProps.showImgToolbar✔️
EditorProps.showImgResize✔️
EditorProps.onReady✔️
EditorProps.onFocus✔️
EditorProps.onBlur✔️
EditorProps.onInput✔️
EditorProps.onStatuschange✔️

editorEventDetail

API Support

APIWeChat Mini-ProgramH5React Native
Editor✔️