# demo

**Repository Path**: umodoc/demo

## Basic Information

- **Project Name**: demo
- **Description**: 本项目是 Umo Editor 的一个简单示例，展示了如何在 Vue3 项目中使用 Umo Editor。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://dev.umodoc.com/cn/docs/editor
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-01
- **Last Updated**: 2026-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## Umo Editor 介绍

Umo Editor 是一个基于 Vue3 和 Tiptap3 的本土化开源文档编辑器，提供类似于 Microsoft Word 的在线编辑功能和浏览体验，专为国人用户设计。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式和普通 Web 模式、Markdown 语法、富文本编辑、多种格式的节点插入、页面样式设置、文档导出与打印等功能。

此外，Umo Editor 还支持自定义扩展、多语言设置和暗色主题。同时我们提供了单独的文本预览组件[Umo Viewer](https://github.com/umodoc/viewer)，用户可以在项目中使用该组件来预览文档。

Umo Editor 最大的特点是代码完全开源且自主可控，支持私有部署，您可以内网环境中使用，而无需担心数据安全问题。同时 Umo Editor 基于 Vue3 和 Tiptap3，两者都有丰富的生态系统和社区支持，在遇到问题时可以迅速得到解决。

作为一个独立的 Vue3 插件，Umo Editor 可以轻松集成到各类 Vue3 项目中。对于非 Vue3 项目，您可以通过 Iframe 将 Umo Editor 嵌入到您的项目中。

[官网](https://www.umodoc.com) | [开发文档](https://dev.umodoc.com/cn/docs/editor) | [在线演示](https://www.umodoc.com/demo) | [GitHub](https://github.com/umodoc/editor) | [码云(国内镜像)](https://gitee.com/umodoc/editor) | [NPM](https://www.npmjs.com/package/@umoteam/editor)

## 项目介绍

本项目是 Umo Editor 的一个简单示例，展示了如何在 Vue3 项目中使用 Umo Editor。

您也可以在 StackBlitz、CodeSandbox 和 Github Pages 上快速查看和运行本项目。

- 在 [StackBlitz](https://stackblitz.com/~/github.com/umodoc/demo?file=src/app.vue) 上查看和运行本项目。
- 在 [CodeSandbox](https://codesandbox.io/p/github/umodoc/demo/main?import=true) 上查看和运行本项目。
- 在 [Github Pages](https://umodoc.github.io/demo/) 上查看和运行本项目。

### 安装依赖

```bash
npm install
```

### 运行项目

```bash
npm run dev
```

更多信息请参考 [Umo Editor 在线文档](https://dev.umodoc.com/cn/docs/editor)。