Umo Editor Documentation

Umo Editor is an open-source document editor built on Vue3 and Tiptap3. It provides a Microsoft Word-like online editing experience, supporting both pagination mode and standard web layout.

Key capabilities include:

• Rich Text & Markdown: Full WYSIWYG editing with Markdown syntax support.
• Document Management: Page style settings, document export, and print/print preview support.
• Customization: Support for custom extensions, multi-language settings, dark mode, and theme customization.
• Deployment: Supports private/intranet deployment for data security.

For document viewing without editing capabilities, use the standalone Umo Viewer component.

Umo Editor is an open-source document editor built on Vue3 and Tiptap3. It is designed to provide a Microsoft Word-like online editing and browsing experience, specifically optimized for Chinese users.

Key capabilities include:

• Editing Modes: Supports both paginated mode (similar to Word) and standard Web mode.
• Content Support: Rich text editing, Markdown syntax, and various node insertion formats.
• Document Management: Page style settings, document export, and print preview.
• Extensibility: Supports custom extensions, multi-language settings, and dark themes.
• Deployment: Fully open-source and supports private/internal network deployment for data security.

For document viewing without editing capabilities, you can use the standalone Umo Viewer component.

Umo Editor is licensed under the MIT License. You are permitted to use, modify, and distribute the software, but you must retain the copyright notice and the link displayed in the interface. Removing these elements is considered an infringement of the license.

If you require a version of the editor that allows for the removal of copyright information, you must contact the maintainers or purchase the commercial version: Umo Editor Next.

Umo Editor Mobile is a dedicated mobile document editor built on Vue3 and Tiptap3. Unlike a simple scaled-down version of the desktop editor, it is redesigned specifically for touch interfaces.

Key mobile features include:

• Full Lifecycle: Supports the complete "Preview + Edit + Save" workflow.
• State Management: Includes a saving state machine, auto-save, and undo/redo guards.
• Consistency: Maintains consistent configuration, event, and method naming with the desktop Umo Editor to allow for easier cross-platform implementation.

Recommendation: If building for both desktop and mobile, abstract a unified editor adaptation layer in your business logic to reuse document models, configuration semantics, and saving workflows.

Umo Editor Mobile is a separate, independent product redesigned specifically for touch-first scenarios. It supports a complete "preview + edit + save" workflow and includes features like a dedicated save state machine, auto-save, back-navigation guards, and history.

Integration Tip: If you need to support both desktop and mobile, it is recommended to abstract a unified editor adapter layer in your application. This allows you to reuse the document model, configuration semantics, and save flow across both platforms.

The editor supports manual and automatic saving. To implement saving, you should provide an onSave callback in your options.

onSave receives:

1. data: { html, json, text }
2. page: The current page state.
3. document: The current document configuration.

The callback should return an object indicating the result:

{
  "status": "success" | "error",
  "message": "Description of result",
  "showMessage": true | false
}

The resetImageToInitial command allows you to revert an image's attributes (like scale, rotation, or position) back to what they were when the image was first inserted.

This works by utilizing the initialAttrs attribute, which stores a serialized snapshot of the original attributes. When resetImageToInitial is called on a selected image, the editor replaces the current node with a new one constructed from that snapshot.

The columns extension includes several integrated ProseMirror plugins:

• Grid Resizing: Uses gridResizingPlugin to allow users to resize columns. It is configured with a handleWidth of 2 and a columnMinWidth of 50.
• Auto-focus: When a columnContainer is inserted into the document, the focusFirstColumnPlugin automatically moves the text selection to the first text block within the first column of the new container.