快速开始
Umo Editor 是一个基于 Vue3 和 Tiptap3 的文档编辑器。 您可以访问https://www.umodoc.com/demo，体验和测试 Umo Editor 的部分功能。
示例项目
为了方便您快速上手 Umo Editor，我们提供了一个示例项目：https://github.com/umodoc/demo ，您可以在该项目中查看和运行 Umo Editor 的示例代码。
您也可以在 StackBlitz、CodeSandbox 和 Github Pages 上快速查看和运行该项目。
- 在 StackBlitz 上查看和运行该项目。
- 在 CodeSandbox 上查看和运行该项目。
- 在 Github Pages 上查看和运行该项目。
安装
使用 NPM 安装
npm install --save @umoteam/editor⚠️
注意：自 v3.0 版本开始，Umo Editor 取消了对 UMD 版本的支持。
使用
以下使用方式任选一种即可：
全局安装
main.js
import { createApp } from 'vue'
import { useUmoEditor } from '@umoteam/editor'
const app = createApp(App)
app.use(useUmoEditor, {
// 配置项
// ...
})
app.mount('#app')直接引入
以下组合式 API 和选项式 API 的示例，任选一种使用即可。
component.vue
<template>
<umo-editor v-bind="options" />
<!-- 或者 -->
<!--
<umo-editor
:editor-key="options.editorKey"
...
/> -->
</template>
// 使用组合式 API
<script setup>
import { ref } from 'vue'
import { UmoEditor } from '@umoteam/editor'
const options = ref({
// 配置项
// ...
})
</script>
// 或使用选项式 API
<script>
import { UmoEditor } from '@umoteam/editor'
export default {
components: {
UmoEditor,
},
data() {
return {
options: {
// 配置项
// ...
},
}
},
}
</script>在 Nuxt 中使用
安装
npx nuxi module add @umoteam/umo-editor-nuxt
# 或
npm i @umoteam/umo-editor-nuxt使用
- 安装和配置
@umoteam/umo-editor-nuxt模块
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@umoteam/umo-editor-nuxt'],
umoEditor: {
// 全局配置项，默认配置见：
// https://dev.umodoc.com/cn/docs/editor/options/default
locale: 'zh-CN',
},
})- 使用 Umo Editor 组件
<template>
<div style="height: 600px;">
<UmoEditor v-bind="options" />
</div>
</template>
<script setup>
const options = ref({
// 配置项，见:
// https://dev.umodoc.com/cn/docs/editor/options/default
})
</script>在非 Vue3 项目中使用
您可以拉取并修改 Umo Editor 的示例项目：https://github.com/umodoc/demo 。根据您的项目需求，修改示例项目中的代码，通过 iframe 将 Umo Editor 嵌入到您的项目中。
配置项
见配置项。