Method Configuration

This section is used to configure methods for Umo Editor, including document saving, file upload, file deletion, and more.

Default Methods

{
  async onSave(content, page, document) {
    throw new Error('Key "onSave": Please set the save method')
  },
  async onFileUpload(file) {
    if (!file) throw new Error('File not found')
    throw new Error('Key "onFileUpload": Please set the upload method')
  },
  onFileDelete(id, url) {
    console.error('The file has been deleted. Please configure the onFileDelete to completely delete the file from the server.')
  },
}

Configuration Description

onSave

Parameters:

content: The content of the document.
page: Page information.
document: Document metadata.

**Return Value: Return trueif the save is successful, otherwise returnfalse` or throw an error.

Example:

The following example uses Axios to demonstrate how to configure the onSave method to save documents to the server:

import axios from 'axios'
import { useUmoEditor } from '@umoteam/editor'
 
const options = {
  async onSave(content, page, document) {
    const res = await axios.post(
      '/api/save',
      {
        content,
        page,
        document,
      },
      {
        headers: {
          'Content-Type': 'application/json',
        },
      },
    )
 
    return true
  },
}
 
app.use(useUmoEditor, options)

onFileUpload

Description: Configures the file upload method. This method is triggered when the user inserts a file, uploading it to the server. Type: AsyncFunction, Promise Parameter:

file: The File object to be uploaded. Return Value:
id: The file ID returned upon successful upload.
url: The file URL returned upon successful upload.

Example:

The following example uses Axios to demonstrate how to configure the onFileUpload method to upload files to the server:

import axios from 'axios'
import { useUmoEditor } from '@umoteam/editor'
 
const options = {
  async onFileUpload(file) {
    let formData = new FormData()
    formData.append('file', file)
    const res = await axios.post('/api/file-upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
 
    return {
      id: res.data.id,
      url: res.data.url,
    }
  },
}
 
app.use(useUmoEditor, options)

onFileDelete

Description: Configures the file deletion method. This method is triggered when a user deletes a file, removing it from the server.Type: Function Parameters:

id: File ID.
url: File URL.

Example:

The following example uses Axios to demonstrate how to configure the onFileDelete method to delete files from the server:

import axios from 'axios'
import { useUmoEditor } from '@umoteam/editor'
 
const options = {
  onFileDelete(id, url) {
    axios.delete(`/api/file/${id}`);
  },
};
 
app.use(useUmoEditor, options)

Appearance Events