Editor - 《Taro 文档帮助手册教程》

sidebar_label: Editor
Type
Examples
EditorProps
- Property Support
- editorEventDetail
API Support

title: Editor

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

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

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

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