Quick Start

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

Example Project

To help you get started quickly, we provide a demo project: https://github.com/umodoc/demo. You can view and run Umo Editor sample code in this project.

You can also preview and run it online with StackBlitz, CodeSandbox, or Github Pages:

View and run on StackBlitz
View and run on CodeSandbox
View and run on Github Pages

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 Import

Choose either of the following examples using Composition API or Options API.

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://dev.umodoc.com/en/docs/editor/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://dev.umodoc.com/en/docs/editor/options/default
})
</script>

Use in Non-Vue3 Projects

You can clone and modify the Umo Editor demo project: https://github.com/umodoc/demo. Based on your project requirements, adjust the code in the demo project and embed Umo Editor into your project via an iframe.

Configuration

See the Default Configuration.

Features Changelog