Document Configuration

Used to configure the display and behavior of the Umo Editor document area and document name.

Default Configuration

{
  document: {
    id: '',
    title: '',
    content: '',
    placeholder: {
      en_US: 'Please enter the document content...',
      zh_CN: '请输入文档内容...',
    },
    enableSpellcheck: true,
    enableMarkdown: true,
    enableBubbleMenu: true,
    enableBlockMenu: true,
    readOnly: false,
    autofocus: true,
    characterLimit: 0,
    typographyRules: {},
    // https://prosemirror.net/docs/ref/#view.EditorProps
    editorProps: {},
    // https://prosemirror.net/docs/ref/#model.ParseOptions
    parseOptions: {
      preserveWhitespace: 'full',
    },
    autoSave: {
      enabled: true,
      interval: 300000,
    },
  },
}

Configuration Options

document.id

Description: Document ID. In the collaborative editing scenario of Umo Editor Next version, document ID is required and used to uniquely identify a document.

Type: String

Default Value: ''

document.title

Description: Document title, used for exported file names, etc. You can dynamically set or modify the document title using the setDocument.

Type: String

Default Value: ''

document.content

Description: Initial document content, which can be modified by the user. You can dynamically set or modify the document content using the setContent.

Type: String

Default Value: ''

document.placeholder

Description: Placeholder when the document content is empty.

Type: String or Object

• zh_CN: Simplified Chinese
• en_US: English

document.enableSpellcheck

Description: Whether to enable browser spellcheck. Users can manually disable it when enabled. You can dynamically set whether to enable browser spellcheck using the setDocument.

Type: Boolean

Default Value: true

document.enableMarkdown

Description: Whether to enable Markdown syntax. Users can manually disable it when enabled. You can dynamically set whether to enable Markdown syntax using the setDocument.

Type: Boolean

Default Value: true

document.enableBubbleMenu

Description: Whether to enable the bubble menu. You can dynamically set whether to display the bubble menu using the setDocument.

Type: Boolean

Default Value: true

document.enableBlockMenu

Description: Whether to enable the block menu. You can dynamically set whether to display the block menu using the setDocument. When the document content is too large, the block menu may have performance issues, see #275, you can consider disabling the block menu. Added in v1.3.0

Type: Boolean

Default Value: true

document.readOnly

Description: Whether the document is read-only. When true, users cannot edit the current document. You can set whether the document is read-only using the setReadOnly.

Type: Boolean

Default Value: false

document.autofocus

Description: Whether the document automatically gains cursor focus. You can set whether the document gains cursor focus using the focus.

Type: Boolean

Default Value: true

document.characterLimit

Description: Document character limit. When 0, there is no limit.

Type: Number

Default Value: 0

document.typographyRules

Description: Document typography rules.

Type: Object

Default Value: {}

Options:

To disable an option, set it to false, for example:

{
  document:{
    typographyRules: {
      emDash: false
    }
  }
}

<template>
  <umo-editor 
    :document="{
      typographyRules: {
        emDash: false
      }
    }" 
  />
</template>
 
<script setup>
import { UmoEditor } from '@umoteam/editor'
</script>

document.autoSave

Description: Document auto-save configuration. You can dynamically set or modify this configuration using the setDocument. Added in v1.4.0

Type: Object

Options:

• enabled: Boolean, whether to enable auto-save. Default value is true.
• interval: Number, auto-save interval in milliseconds. Default value is 300000 (5 minutes).

document.editorProps

Description: For advanced scenarios, you can pass some configurations to ProseMirror via document.editorProps. You can use it to override various editor events or change editor DOM element attributes. More information: https://prosemirror.net/docs/ref/#view.EditorProps . Added in v2.3.0

Example:

{
  editorProps: {
    attributes: {
      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
    },
    transformPastedText(text) {
      return text.toUpperCase()
    },
  },
}

Type: Object

Default Value: {}

document.parseOptions

Description: Defines ProseMirror parsing behavior. When you need to parse a DOM node or a raw text string into ProseMirror’s document model, you can use document.parseOptions to customize the parsing process. More information: https://prosemirror.net/docs/ref/#model.ParseOptions . Added in v2.3.0

Type: Object

Default Value: { preserveWhitespace: 'full' }