Documention
Getting Started

Quick Start

Umo-Editor is a document editor based on Vue3. You can visit https://demo.umodoc.com/editor to experience and test some features of Umo-Editor.

Installation

Install with NPM

npm config set "@tiptap-pro:registry" https://registry.tiptap.dev/ 
npm config set "//registry.tiptap.dev/:_authToken" 9fsQEgp8C8pbxpk8PFAjYn64BtBDq6HfXmI2qgpnI7XYr/OwHaMvOUIE5mfVR49y
npm install --save @umoteam/editor @umoteam/editor-external

Umo Editor provides both ES and UMD formats for files, which can be used as needed. Typically, the ES version is used in engineered projects, and the UMD version is used in browsers.

Install by Including in Browser

<script src="https://unpkg.com/vue"></script> 
<!-- Include required dependencies on demand -->
<script src="https://unpkg.com/@umoteam/editor-external@latest/libs/mermaid.min.js"></script> 
<script src="https://unpkg.com/@umoteam/editor-external@latest/libs/katex/katex.min.js"></script> 
<script src="https://unpkg.com/@umoteam/editor-external@latest/libs/plyr.min.js"></script> 
<script src="https://unpkg.com/@umoteam/editor-external@latest/libs/qrcode-svg.min.js"></script> 
<script src="https://unpkg.com/@umoteam/editor-external@latest/libs/jsbarcode.all.min.js"></script> 
<!-- Include Umo Editor -->
<script src="https://unpkg.com/@umoteam/editor/dist/umd/umo-editor.js"></script> 
<link rel="stylesheet" href="https://unpkg.com/@umoteam/editor/dist/umd/style.css"  />
...
<script>
  const app = Vue.createApp();
  app.use(UmoEditor.useUmoEditor, {
    // Configuration options
    // ...
  });
  app.mount('#app');
</script>

The file paths above can be configured with CDN for local resources. See CDN Configuration - Using Local Resources.

Usage

You can choose any of the following methods:

Global Installation

main.js
import { createApp } from 'vue';
import { useUmoEditor } from '@umoteam/editor';
 
const app = createApp(App);
app.use(useUmoEditor, {
  // Configuration options
  // ...
});
app.mount('#app');

Direct Inclusion

Choose either of the following examples using Composition API and Options API in JS.

component.vue
<template>
  <umo-editor v-bind="options" />
  <!-- Or -->
  <!-- 
  <umo-editor 
    :editor-key="options.editorKey" 
    ... 
  /> -->
</template>
 
// Using Composition API
<script setup>
  import { ref } from 'vue'
  import { UmoEditor } from '@umoteam/editor';
 
  const options = ref({
    // Configuration options
    // ...
  });
</script>
 
// Or using Options API
<script>
  import { UmoEditor } from '@umoteam/editor';
 
  export default {
    components: {
      UmoEditor
    },
    data() {
      return {
        options: {
          // Configuration options
          // ...
        }
      }
    }
  }
</script>

Usage in Nuxt3

Umo Editor does not currently support SSR. In Nuxt3, when in SSR mode, you can use the <client-only> component to ensure that Umo Editor is rendered and used on the client side.

component.vue
<template>
  <client-only>
    <umo-editor v-bind="options" />
  </client-only>
</template>
 
<script setup>
  import { UmoEditor } from '@umoteam/editor';
 
  const options = ref({
    // Configuration options
    // ...
  });
</script>

Configuration

See the Default Configuration section.

FAQCustom Themes