快速开始
Umo Editor Mobile 是一个基于 Vue3 和 Tiptap3 的移动端文档编辑器，适合在 H5、WebView、Hybrid 容器等触控场景中使用。
在实际交付方式上，不以公共 NPM 包直接接入，而是通过官方私有仓库提供的打包产物或源码仓库自行打包后接入项目。
您可以先访问以下地址体验真实效果：
查看集成示例
官方提供的代码仓库除打包产物外，还包含一个基础集成示例，您可以直接运行示例快速体验，并参考示例代码完成接入。
1. 安装依赖
在代码仓库根目录运行：
npm install2. 启动示例
npm run dev3. 参考示例代码
示例的核心集成代码位于 src/app.vue，可参考该文件了解在 Vue3 项目中如何初始化与配置 Umo Editor Mobile。
使用官方提供的打包代码
1. 复制打包代码
npm install --save ./umoteam-editor-mobile-xxx.tgz注意：移动端包名为 @umoteam/editor-mobile，
但商业交付时通常通过本地 .tgz 包安装，而不是直接从公共 NPM 获取。
2. 一切就绪
通过上述操作，您已经成功安装了 Umo Editor Mobile 的依赖，接下来就可以在项目中使用了。
自行打包
如果您拿到的是完整源码仓库，也可以自行打包。
1. 安装依赖并打包
npm install
npm run build2. 使用打包产物安装
自行打包后，请将最终交付的安装包或官方要求的打包产物复制到业务项目中，再按上一节“使用官方提供的打包代码”的方式安装。
自行打包后的实际交付形式，请以商业交付说明或私有仓库中的发布规范为准。
基础使用
完成安装后，以下接入方式任选一种即可。
全局安装
import { createApp } from 'vue'
import App from './App.vue'
import { useUmoEditor } from '@umoteam/editor-mobile'
const app = createApp(App)
app.use(useUmoEditor, {
locale: 'zh-CN',
})
app.mount('#app')直接引入
<template>
<div class="editor-shell">
<umo-editor v-bind="options" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import UmoEditor from '@umoteam/editor-mobile'
const options = ref({
document: {
title: '移动端示例文档',
content: '<p>欢迎使用 Umo Editor Mobile</p>',
},
async onSave(content, page, document) {
console.log('save', { content, page, document })
return '保存成功'
},
})
</script>
<style scoped>
.editor-shell {
width: 100dvw;
height: 100dvh;
}
</style>最小可运行配置
为了让编辑器能够正常进入“编辑 + 保存”流程，建议至少提供以下配置：
document.title：文档标题。document.content：初始内容，可以是 HTML 字符串。onSave：异步保存方法；如果不配置，默认实现会直接抛错。document.readOnly：如果只想做预览，可设置为true。
const options = {
document: {
title: '测试文档',
content: '<p>Hello Umo Editor Mobile</p>',
},
async onSave(content) {
await api.save(content.html)
return '保存成功'
},
}常见接入方式
在 Nuxt / SSR 场景中使用
<template>
<client-only>
<umo-editor v-bind="options" />
</client-only>
</template>
<script setup>
import UmoEditor from '@umoteam/editor-mobile'
const options = ref({
async onSave() {
return '保存成功'
},
})
</script>注意：移动端编辑器依赖浏览器环境与 DOM 能力，当前没有官方 Nuxt
模块，在 SSR 场景中请使用
client-only 或等效方式保证仅在客户端渲染。
在非 Vue3 项目中使用
如果您的业务不是 Vue3 项目，推荐将一个独立的 Vue3 页面或子应用封装为 H5 页面，再通过 WebView、iframe 或微前端容器嵌入。
Umo Editor Mobile 本质上是 Vue3 组件库，而不是无框架运行时。对于非 Vue3 项目，推荐采用“独立移动端页面 + 容器嵌入”的方式接入。
接入建议
- 编辑器建议完全独占一个页面，并将编辑器容器高度设为
100dvh，宽度设为100dvw。 - 如果只做阅读/审批，优先使用
document.readOnly: true，这样可以直接进入阅读态。 - 如果业务包含重命名、上传文件、删除文件等能力，再按需实现
onRename、onFileUpload、onFileDelete。 - 移动端默认支持
web与page两种布局，初始布局以page.layouts[0]为准；默认值为['web', 'page']。
配置项
更多完整配置见配置项。