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.

In Umo Editor Next, if features such as comments or document forms are enabled at the same time, onSave will append the corresponding structured data in later arguments. For example:

The 4th parameter, comments: the current comment thread list
The 5th parameter, form: the current structured form data

**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