DevDex
Explore
← BACK
@fazi-gondal / umo-editor

umo-editor

This project is a simple demo of Umo Editor, showing how to use Umo Editor in a Vue 3 project.

Vue ⭐ 0
▶ Demo </> Source

README

Open on GitHub ↗

Umo Editor Demo

A Vue 3 demonstration application showcasing the integration and usage of Umo Editor (@umoteam/editor), a powerful open-source document editor based on Vue 3 and Tiptap 3 that provides a Microsoft Word-like editing experience.

Official Website | Documentation | Playground | GitHub Repository | NPM Package

🚀 Key Features

  • 📝 Word-Like Document Editing: Rich-text editing with support for pagination, web layout mode, Markdown syntax, page style settings, and bookmark navigation.
  • ⚡ Built on Vue 3 & Tiptap 3: Highly customizable and extensible architecture backed by rich ecosystems and active communities.
  • 📋 Preset Document Templates: Built-in structured templates (Work Tasks, Weekly Reports) with automatic English and Chinese localization.
  • 💾 Async Save & Persistence: Handles document saving with custom callbacks and auto-persists content to localStorage.
  • 📁 File Attachment & Upload Support: Integrated file upload handlers for PDF, SVG graphics, MP4 video, and audio assets.
  • 🌐 Automatic Locale Detection: Automatically detects browser language preferences with support for en-US and zh-CN.
  • 🔒 Private & Secure Deployment: 100% open-source code controllable for secure intranet and self-hosted environments.

🛠️ Tech Stack

📁 Project Structure

umo-editor/
├── public/          # Static assets & favicon
├── src/
│   ├── app.vue      # Main application component & Umo Editor configuration
│   └── main.js      # Vue 3 entry point
├── index.html       # Entry HTML document
├── package.json     # Project dependencies and npm scripts
├── vite.config.js   # Vite build configuration
└── README.md        # Project documentation

📦 Getting Started

Prerequisites

  • Node.js: v18.0.0 or higher recommended
  • Package Manager: npm (included with Node.js)

Installation

Clone the repository and install the project dependencies:

npm install

Development

Run the local development server:

npm run dev

Open your browser at http://localhost:5173 (or the URL displayed in your terminal).

Production Build

Build the project for production distribution:

npm run build

Preview the generated production build locally:

npm run preview

⚙️ Demo Configuration Overview

The primary demonstration setup is located in src/app.vue. Key configured capabilities include:

  • Locale & i18n: Automatic browser language detection with localized template content (tr(cn, en)).
  • Custom Templates: Structured starter layouts for work tasks and weekly status reports.
  • Document Handlers: Custom async onSave logic persisting document HTML to localStorage, and onFileUpload mock uploading for media types (PDF, SVG, MP4, Audio).
  • User Context: Active user profile (Faizan Gondal) and collaborative user listing configurations.

📄 License

This project is licensed under the MIT License.