editor

Description

The editor component is a rich text editor that allows editing of images and text. The editor exports content in both HTML format with tags and plain text format.

Attribute Description

Attribute	Type	Default Value	Required	Description
defaultHtml	String	none	No	The initial content of the editor
editorPlaceholder	String	none	No	The placeholder text for the editor
done	String	none	No	The label for the completion button
imgs	Array	none	No	The images to be inserted at the cursor position

Events

Event Name	Description	Callback Parameters
onChange	Triggered when the content of the editor changes	content (the updated content)
choseMedia	Triggered when the image button in the toolbar is clicked	number (maximum number of images to insert)
onSave	Notifies the user to save the content	content (the current content of the editor)

Example

<view class="wrap">
  <editor
    :defaultHtml="defaultHtml"
    :done="done"
    :imgs="imgs"
    bind:choseMedia="onChoseMedia"
    :editorPlaceholder="editorPlaceholder"
    bind:onSave="onSave"
    bind:onChange="onChange"
  />
</view>

Page({
  data: {
    defaultHtml: '<p>hello editor</p>',
    editorPlaceholder: 'input',
    done: 'done',
    imgs: [],
    id: null,
  },
  onLoad({ id }) {
    this.setData({
      id,
    });
  },
  onChange(data) {
    console.log('onChange===', data);
  },
  onChoseMedia(count) {
    dlt.chooseMedia({
      count,
      success: (res) => {
        try {
          const images = JSON.parse(res.images) || [];
          this.setData({
            imgs: images,
          });
        } catch (error) {}
      },
    });
  },
  onSave(data) {
    console.log('onSave====', data);
  },
});