🎉🎉🎉 Umo Editor Mobile has been released. Learn more →
DocumentionUmo Editor NextMarkdown Enhancement

Markdown Enhancements

Starting from v10.0, Umo Editor Next introduces a comprehensive set of enhancements to its Markdown support, including:

  • Support for setting the document content directly as Markdown, or inserting Markdown into the editor and rendering it correctly;
  • APIs for setting the document content as Markdown and inserting Markdown at specific positions;
  • Import and export capabilities for Markdown, allowing users to load local Markdown files or export the current document as Markdown;
  • Adoption of the faster, more modern, and lightweight Marked library as the Markdown rendering engine, with support for custom renderers and parsing behavior;
  • Exposure of the internal MarkdownManager instance, enabling bidirectional conversion between Markdown and document content, as well as advanced customization of the Marked parser;
  • Support for integrating and extending Markdown capabilities within editor extensions.

Use Cases

  • Technical writing: draft fast in Markdown, then refine layout with rich text
  • Product docs/PRDs: write and insert structured elements like tables, images, and attachments
  • Knowledge base workflows: import/export Markdown to interoperate with other systems
  • Migration and sync: bring content from Git/Markdown repos for collaborative review
  • Content reuse: insert Markdown snippets as standard paragraphs or template fragments
  • AI rewriting: use Markdown as a stable intermediate representation for structured output
  • Website publishing: export Markdown for static sites and documentation generators
  • Lightweight notes: start with Markdown for minutes/weekly reports, then polish as needed

Works Well With

Import / Export

  • Use Markdown import/export as an exchange format when integrating with the broader Markdown ecosystem: Import, Export

Collaboration and Comments

AI

  • Markdown-structured AI output is more stable and can be inserted directly for further editing: AI
⚠️

Important: Starting from v10.0, Umo Editor Next has removed the import.markdown configuration. All Markdown-related configuration is now unified under document.markedOptions. At the same time, the getJSONByMarkdown method has been deprecated and replaced by getMarkdown.

Default Configuration

const options = {
  document: {
    contentType: undefined,
    markedOptions: {},
  },
}

Configuration Reference

document.contentType

Description: Specifies the type of the document content. If the initial document content (i.e. document.content) is Markdown, this option must be set to markdown so that the editor can correctly recognize and parse it. For other content types, this option can be omitted, as the editor will automatically detect the content format.

Type: String

Allowed values: json, html, markdown

document.markedOptions

Description: Configuration options and instance for Marked.

Type: Object

  • document.markedOptions.instance: The Marked instance. You can pass in an externally created Marked instance to take over the internal one, enabling more flexible and advanced customization.
  • document.markedOptions.xxx: Any Marked configuration option. For a full list, see the official documentation: https://marked.js.org/using_advanced#options

API Methods

setMarkdown

Description: Replaces the entire document content with the provided Markdown string. Umo Editor Next will automatically parse and convert the Markdown into the internal document structure.

Parameters:

  • String: The Markdown content to set.

Returns: Boolean | Error

insertMarkdown

Description: Inserts Markdown at the current cursor position. The editor will automatically parse and render the content.

Parameters:

  • markdown: The Markdown content to insert;
  • options: Additional options passed to editor.insertContent. See the insertContent method for details.

Returns: Boolean | Error

insertMarkdownAt

Description: Inserts Markdown at a specific position or range within the document. The content will be parsed and rendered automatically.

Parameters:

  • position: The insertion position or range, for example 10 or { from: 12, to: 16 };
  • markdown: The Markdown content to insert;
  • options: Additional options passed to editor.insertContent. See the insertContent method for details.

Returns: Boolean | Error

getMarkdown

Description: Returns the current document content as a Markdown string.

Parameters: None.

Returns: String | Error

getMarkdownManager

Description: Retrieves the internal MarkdownManager instance, through which you can directly access bidirectional conversion methods between Markdown and document content, as well as customize Marked parsing logic.

Parameters: None.

Returns: Object

Example:

const manager = editor.getMarkdownManager()
 
// Convert Markdown to JSON
const json = manager.parse('# Hello, Umo Editor Next')
console.log(json)
 
// Convert JSON back to Markdown
const markdown = manager.serialize(json)
console.log(markdown)
 
// Access the Marked instance
const marked = manager.instance
console.log(marked)
 
// Render a single node to Markdown
const markdown = manager.renderNodeToMarkdown(node)
console.log(markdown)
 
// Render multiple nodes to Markdown
const markdown = manager.renderNodes(nodes)
console.log(markdown)
 
// Inspect the full MarkdownManager API
console.log(manager)
ExportTable Enhancement