Method Configuration

This section is used to configure methods for Umo Editor, including document saving, file upload, file deletion, AI document assistant response handling, 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 Details

onSave

Description:
Configures the document saving method. When the user saves a document, this method will be called to save it to the server.

Type: AsyncFunction, Promise

Parameters:

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

Return Value:
Return true if the save is successful, otherwise return false 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)

Theme Events