Methods List

This section introduces the methods of Umo Editor. With the methods provided by Umo Editor, you can perform some routine operations on Umo Editor. You can visit https://demo.umodoc.com/editor?pane=events&lang=en-US, click the corresponding method button, and view the usage of the method.

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 Descriptions

getOptions

Description: Get the configuration of Umo Editor.

Parameters: None

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

setOptions

Description: Set the configuration of Umo Editor.

Parameters: Object, containing the configuration of Umo Editor.

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

setToolbar

Description: Set the toolbar type of Umo Editor.

Parameters: { mode, show }

mode: String, toolbar type, optional values are ribbon, classic.
show: Boolean, whether to show the toolbar.

Return Value: None.

setPage

Description: Set 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, optional values are portrait, landscape.
background: String, page background, a valid CSS color value.

Return Value: None.

setWatermark

Description: Set the watermark information of Umo Editor.

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

type: String, watermark type, optional values are: compact, spacious.
alpha: Number, watermark transparency, optional values are: 0-1.
fontColor: String, font color, optional values are: valid CSS color values.
fontSize: Number, font size, in px.
fontFamily: Number, font, valid CSS font-family values.
fontWeight: String, font weight, optional values are: normal, bold, bolder.
text: String, watermark content, recommended not to exceed 30 characters.

Return Value: None.

setDocument

Description: Set 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: Set the content of Umo Editor.

Parameters:

content: Valid HTML format or other valid Tiptap document.
options: // Added in v2.2.0
- emitUpdate: true, whether to trigger the update event.
- focusPosition: Focus position, optional values are: ‘start’ | ‘end’ | ‘all’ | number | boolean | null (false).
- focusOptions: { scrollIntoView: true }.

Return Value: None.

insertContent

Description: Insert content at the current selected text position. Added in v6.0.0

Parameters:

content: Valid HTML format or other valid Tiptap document.
options:
- updateSelection: true, whether to update the selection.
- focusPosition: Focus position, optional values are: ‘start’ | ‘end’ | ‘all’ | number | boolean | null (false).
- focusOptions: { scrollIntoView: true }.

Return Value: None.

setLocale

Description: Set the display language of Umo Editor. Added in v2.0.0

Parameters: zh-CN or en-US.

Return Value: None.

setTheme

Description: Set the theme of Umo Editor. Added in v2.1.0

Parameters: light, dark, auto.

Return Value: None.

getPage

Description: Get the page configuration information of Umo Editor. Added in v5.0.0

Parameters: None.

Return Value: Page configuration information.

setPage

Description: Set the page configuration information of Umo Editor. Added in v5.0.0

Parameters: Page configuration information.

Return Value: None.

getContent

Description: Get the content of Umo Editor.

Parameters: String, optional values are html, json, text.

Return Value: html, json, text.

getContentExcerpt

Description: Get the content excerpt of Umo Editor.

Parameters:

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

Return Value: Document excerpt.

getHTML

Description: Get the HTML content of Umo Editor.

Parameters: None.

Return Value: html.

getJSON

Description: Get the JSON content of Umo Editor.

Parameters: None.

Return Value: JSON.

getText

Description: Get the text content of Umo Editor.

Parameters: None.

Return Value: Text.

getImage

Description: Get the page screenshot of Umo Editor.

Parameters: String, optional values are blob, jpeg, png.

Return Value: Image information.

saveContent

Description: Save the content of Umo Editor.

Parameters: Boolean, whether to show a success message.

Return Value: None.

getEditor

Description: Get the Vue instance of the Editor.

Parameters: None.

Return Value: Vue instance of Tiptap Editor.

useEditor

Description: Get the instance of the Editor. Added in v4.6.0

Parameters: None.

Return Value: Tiptap Editor instance.

getTableOfContents

Description: Get the page outline. For more page outline information, you can get the editor instance through getEditor() and then access editor.storage.tableOfContents. Added in v3.0.0

Parameters: None.

Return Value:

[
  {
    dom: HTMLElement, // The HTML element corresponding to the current anchor
    editor: Editor, // Editor instance
    id: String, // Node ID
    isActive: Boolean, // Whether the current anchor is active
    isScrolledOver: Boolean, // Whether this anchor has been scrolled over
    itemIndex: Number, // Item index at the current level
    level: Number, // Current level of the item - this may differ from the actual anchor level, used for rendering hierarchy from high to low
    node: Node, // ProseMirror node corresponding to the current anchor
    originalLevel: Number, // Actual level
    pos: Number, // Position of the anchor node
    textContent: String // Text content of the anchor
  }
]

getSelectionText

Description: Get the text content of the currently selected text. Added in v3.0.0

Parameters: None.

Return Value: None.

getSelectionNode

Description: Get the information of the currently selected node. Starting from version v6.0.0, it has been adjusted to get the currently selected node instead of the ancestor node of the currently selected node (i.e., the child node of the document node). Added in v3.0.0

Parameters: None.

Return Value: Tiptap Node.

setCurrentNodeSelection

Description: Used to select the entire node at the current focus position. For example, when the cursor is in a cell of a table, calling this method will select the entire table. Added in v3.1.0

Parameters: None.

Return Value: None.

deleteSelectionNode

Description: Delete the currently selected node. Starting from version v6.0.0, it has been adjusted to delete the currently selected node instead of the ancestor node of the currently selected node (i.e., the child node of the document node). Added in v3.0.0

Parameters: None.

Return Value: None.

getLocale

Description: Return the display language of Umo Editor. Added in v2.0.0

Parameters: None.

Return Value: zh-CN or en-US.

getI18n

Description: Return the vue-i18n instance. Added in v2.0.0

Parameters: None.

Return Value: vue-i18n.

setReadOnly

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

Parameters: Boolean, whether to be read-only.

Return Value: None.

print

Description: Print the page. Added in v1.1.0

Parameters: None.

Return Value: None.

focus

Description: Make Umo Editor gain focus.

Parameters:

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

Return Value: None.

blur

Description: Make Umo Editor lose focus.

Parameters: None.

Return Value: None.

toggleFullscreen

Description: Toggle the fullscreen state of Umo Editor (viewport fullscreen, not browser fullscreen). Added in v6.0.0

Parameters: None.

Return Value: None.

getAllBookmarks

Description: Return all bookmarks in the document. Added in v6.0.0

Parameters: None.

Return Value: Array, an array of bookmark names.

focusBookmark

Description: Focus on the specified bookmark position. Added in v6.0.0

Parameters: bookmarkName, String, bookmark name.

Return Value: Boolean, whether the setting was successful.

setBookmark

Description: Set a bookmark. Added in v6.0.0

Parameters: bookmarkName, String, bookmark name.

Return Value: Boolean, whether the setting was successful.

deleteBookmark

Description: Delete the specified bookmark. Added in v6.0.0

Parameters: bookmarkName, String, bookmark name.

Return Value: Boolean, whether the deletion was successful.

useAlert

Description: Use the alert box of Umo Editor.

Parameters: options, object, related configuration of TDesign Next Dialog.

Return Value: TDesign Next Dialog instance.

useConfirm

Description: Use the confirmation box of Umo Editor.

Parameters: options, object, related configuration of TDesign Next Dialog.

Return Value: TDesign Next Dialog instance.

useMessage

Description: Use the message prompt of Umo Editor.

Parameters:

type: String, message type, optional values are success, warning, error, info.
options: Related configuration of TDesign Next Message.

Return Value: TDesign Next Message instance.

More Methods

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

Events AI Assistant