Documention
Methods

Methods

This section introduces the methods of Umo Editor, through which you can perform routine operations on Umo Editor. You can visit https://demo.umodoc.com/editor?pane=events&lang=en-US, click the corresponding method buttons to see how to use the methods.

Example

<template>
  <umo-editor
    ref="editorRef"
    v-bind="options"
  />
  <button @click="getOptions">Get Configuration</button>
</template>
 
<script setup>
  import { ref } from 'vue';
  import { UmoEditor } from '@umoteam/editor';
 
  const editorRef = ref(null);
  const options = ref({
    // Configuration options
    // ...
  })
 
  const getOptions = () => {
    const options = editorRef.value.getOptions();
    console.log(options);
  }
</script>

Method Description

getOptions

Description: Retrieves the configuration of Umo Editor.

Parameters: None

Return Value: Object , containing the configuration of Umo Editor.

setOptions

Description: Sets the configuration of Umo Editor.

Parameters: Object , containing the configuration of Umo Editor.

Return Value: Object , containing the configuration of Umo Editor.

setToolbar

Description: Sets the toolbar type of Umo Editor.

Parameters: { mode, show }

  • mode: String, toolbar type, with options robbin, classic.
  • show: Boolean, whether to show the toolbar.

Return Value: None.

setPage

Description: Sets the page information of Umo Editor.

Parameters: Object , containing the page information to be set.

  • size: String, page size, should be the label value provided in dicts.pageSizes, such as A4.
  • orientation: String, page orientation, options are portrait, landscape.
  • background: String, page background, a valid CSS color value.

Return Value: None.

setWatermark

Description: Sets the watermark information of Umo Editor.

Parameters: Object , containing the watermark information to be set.

  • type: String, watermark type, options are compact, spacious.
  • alpha: Number, watermark transparency, options are 0-1.
  • fontColor: String, font color, a valid CSS color value.
  • fontSize: Number, font size in pixels.
  • fontFamily: String, font family, a valid CSS font-family value.
  • fontWeight: String, font weight, options are normal, bold, bolder.
  • text: String, watermark text, recommended to be no more than 30 characters.

Return Value: None.

setDocument

Description: Sets the document information of Umo Editor.

Parameters: Object , containing the document information to be set.

  • title: String, document title.
  • bubbleMenu: Boolean, whether to enable the bubble menu.
  • blockMenu: Boolean, whether to enable the block menu.
  • markdown: Boolean, whether to enable Markdown syntax.
  • spellcheck: Boolean, whether to enable browser spell check.

Return Value: None.

setContent

Description: Sets the content of Umo Editor.

Parameters:

  • content : Valid HTML format or other valid Tiptap document formats.
  • options : // New in v2.2.0
    • emitUpdate: true, By default, it doesn’t trigger the update event. Passing doesn’t prevent triggering the update event.
    • focusPosition: Focus position, possible values are: ‘start’ | ‘end’ | ‘all’ | number | boolean | null (false).
    • focusOptions: { scrollIntoView: true }.

Return Value: None.

autoPagination New in v5.0.0

Description: Actively paginate the document content or cancel active pagination. Canceling active pagination is mainly to reduce the performance overhead caused by frequent pagination in a short period (such as when dragging to change the node height, which frequently triggers pagination). Usually, after an appropriate time (such as after the DOM height changes), call active pagination again to ensure correct pagination.content.

Parameters: Boolean

Return Value: None.

setLocale

Description: Sets the display language of Umo Editor. New in v2.0.0

Parameters: zh-CN or en-US.

Return Value: None.

setTheme

Description：Sets the theme of Umo Editor. New in v2.1.0

Parameters：light 、 dark 、 auto.

Return Value：None.

getContent

Description: Retrieves the content of Umo Editor.

Parameters: String, options are html, json, text .

Return Value: html , json , text .

getContentExcerpt

Description: Retrieves a summary of the content in Umo Editor.

Parameters:

  • charLimit: Number, summary length, default is 100 characters.
  • more: String, summary ending, default is ....

Return Value: Document summary.

getHTML

Description: Retrieves the HTML content of Umo Editor.

Parameters: None.

Return Value: html.

getJSON

Description: Retrieves the JSON content of Umo Editor.

Parameters: None.

Return Value: JSON.

getText

Description: Retrieves the text content of Umo Editor.

Parameters: None.

Return Value: Text.

getImage

Description: Retrieves a screenshot of the page in Umo Editor.

Parameters: String, options are blob , jpeg , png .

Return Value: Image information.

saveContent

Description: Saves the content of Umo Editor.

Parameters: None.

Return Value: None.

getEditor

Description: Retrieves the instance of the Editor.

Parameters: None.

Return Value: Tiptap Editor instance.

getTableOfContents

Description：Get the page Table of Contents. More information about the page outline can be obtained by first getting the editor instance through getEditor(), and then accessing editor.storage.tableOfContents. New in v3.0.0

Parameters：None.

Return Value：

[
  {
    dom: HTMLElement // the HTML element for this anchor
    editor: Editor // the editor
    id: String // the node id
    isActive: Boolean // whether this anchor is currently active
    isScrolledOver: Number // whether this anchor was already scrolled over
    itemIndex: Number // the index of the item on it's current level
    level: Number // the current level of the item - this could be different from the actual anchor level and is used to render the hierarchy from high to low headlines
    node: Node // the ProseMirror node for this anchor
    originalLevel: Number // the actual level
    pos: Number // the position of the anchor node
    textContent: String // the text content of the anchor
  }
]

getSelectionText

Description: Gets the content of the currently selected text. New in v3.0.0

Parameters: None.

Return Value: None

getSelectionNode

Description: Gets information about the currently selected node. New in v3.0.0

Parameters: None.

Return Value: Tiptap Node.

setCurrentNodeSelection

Description: Selects the entire node at the current focus position, such as selecting the entire table when the cursor is in a cell within a table. Added in v3.1.0

Parameters: None.

Return Value: None.

deleteSelectionNode

Description: Deletes the currently selected node. Added in v3.0.0

Parameters: None.

Return Value: None

getLocale

Description: Returns the display language of Umo Editor. New in v2.0.0

Parameters: None.

Return Value: zh-CN or en-US.

getI18n

Description: Returns the vue-i18n instance. New in v2.0.0

Parameters: None.

Return Value: vue-i18n.

setReadOnly

Description: Sets the read-only state of Umo Editor.

Parameters: Boolean, whether it is read-only.

Return Value: None.

print

Description: Prints the page. New in v1.1.0

Parameters: None.

Return Value: None.

focus

Description: Gives focus to Umo Editor.

Parameters:

  • position : ‘start’ | ‘end’ | ‘all’ | number | boolean | null (false)
  • options : { scrollIntoView: boolean } // New in v2.2.0

Return Value: None.

blur

Description: Removes focus from Umo Editor.

Parameters: None.

Return Value: None.

Additional Methods

The Umo Editor is implemented based on Tiptap. For more internal methods of Tiptap, please refer to the Tiptap Editor.

EventsAI Assistant