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
Image controls take effect only during initialization.
Some HTML tags and inline styles are supported within the editor, class and id are not supported
Type
ComponentType<EditorProps>
Examples
- React
- Vue
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>
)
}
}
<template>
<view class="container">
<editor id="editor" class="editor" :placeholder="placeholder" @ready="editorReady"></editor>
<button type="warn" @tap="undo">Undo</button>
</view>
</template>
<script>
import Taro from '@tarojs/taro'
export default {
data() {
return {
placeholder: 'Please enter your nickname...'
}
},
methods: {
editorReady() {
Taro.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
},
undo() {
this.editorCtx.undo()
}
}
}
</script>
EditorProps
Property | Type | Default | Required | Description |
---|---|---|---|---|
readOnly | boolean | false | No | Sets the editor to read-only |
placeholder | string | No | Prompts information | |
showImgSize | boolean | false | No | Displays the image size control when the image is tapped |
showImgToolbar | boolean | false | No | Displays the toolbar control when the image is tapped |
showImgResize | boolean | false | No | Displays the size change control when the image is tapped |
onReady | BaseEventOrigFunction<any> | No | Triggered after the editor is initialized | |
onFocus | BaseEventOrigFunction<editorEventDetail> | No | Triggered when the editor is focused. event.detail = { html, text, delta } | |
onBlur | BaseEventOrigFunction<editorEventDetail> | No | Triggered when the editor is unfocused. detail = { html, text, delta } | |
onInput | BaseEventOrigFunction<editorEventDetail> | No | Triggered when the editor content changes. detail = { html, text, delta } | |
onStatuschange | BaseEventOrigFunction<any> | No | Triggered when styles in the editor are changed via Context. It returns the styles that are set for the selected area. |
Property Support
Property | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
EditorProps.readOnly | ✔️ | ||
EditorProps.placeholder | ✔️ | ||
EditorProps.showImgSize | ✔️ | ||
EditorProps.showImgToolbar | ✔️ | ||
EditorProps.showImgResize | ✔️ | ||
EditorProps.onReady | ✔️ | ||
EditorProps.onFocus | ✔️ | ||
EditorProps.onBlur | ✔️ | ||
EditorProps.onInput | ✔️ | ||
EditorProps.onStatuschange | ✔️ |
editorEventDetail
API Support
API | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
Editor | ✔️ |