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: '请输入文档内容...',
      ru_RU: 'Пожалуйста, введите содержимое документа...',
    },
    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.

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
• ru_RU: Russian

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. 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' }