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: 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.