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

React

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>
    )
  }
}

Vue

<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	✔️