Quick Start

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

Installation

Install with NPM

npm install --save @umoteam/editor

pnpm add @umoteam/editor

yarn add @umoteam/editor

bun add @umoteam/editor

⚠️

Note: Starting from version v3.0, Umo Editor no longer supports the UMD version.

Usage

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 or 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

Installation

npx nuxi module add @umoteam/umo-editor-nuxt
# Or
npm i @umoteam/umo-editor-nuxt

Usage

Install and configure the umo-editor-nuxt module

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@umoteam/umo-editor-nuxt'],
  umoEditor: {
    // Global configuration options. Default config:
    // https://editor.umodoc.com/cn/docs/options/default
    locale: 'en-US',
  },
})

Use the Umo Editor component

<template>
  <div style="height: 600px;">
    <umo-editor v-bind="options" />
  </div>
</template>
 
<script setup>
const options = ref({
    // Configuration options:
    // https://editor.umodoc.com/cn/docs/options/default
})
</script>

Configuration

See the Default Configuration.

Features Changelog