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 install --save @umoteam/editor
⚠️

Note: As of version v3.0, Umo Editor has dropped support for the UMD version.

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.

FeaturesChangelog