kindy-editor 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +22 -0
- package/README.md +269 -0
- package/README.zh-CN.md +193 -0
- package/dist/kindy-editor.cjs +148 -0
- package/dist/kindy-editor.css +1 -0
- package/dist/kindy-editor.d.ts +185 -0
- package/dist/kindy-editor.iife.js +148 -0
- package/dist/kindy-editor.js +65944 -0
- package/package.json +154 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Original work Copyright © 2024 Umo Team (https://github.com/umodoc/editor)
|
|
4
|
+
Modified work Copyright © 2026 Kindy
|
|
5
|
+
|
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
in the Software without restriction, including without limitation the rights
|
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
furnished to do so, subject to the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
# kindy-editor (Kindy Editor)
|
|
2
|
+
|
|
3
|
+
Trình biên tập tài liệu chuẩn Office (Word-like Document Editor) hiện đại dựa trên **Vue 3** và **Tiptap 3**. Được tùy biến, tối ưu hóa và hỗ trợ 100% giao diện **Tiếng Việt**.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/kindy-editor)
|
|
6
|
+
[](./LICENSE)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## ✨ Tính năng nổi bật
|
|
11
|
+
|
|
12
|
+
- 📄 **Phân trang dạng Word (Page-based Pagination)**: Hỗ trợ ngắt trang, căn lề, khổ giấy (A4, A3, Letter, Legal...) chân trang & đầu trang (Header/Footer).
|
|
13
|
+
- 💬 **Hệ thống Bình luận (Word-style Comments)**: Bôi đen văn bản để gắn bình luận, phản hồi (Reply), hoàn thành (Resolve), cuộn mượt và highlight từng người dùng.
|
|
14
|
+
- 🇻🇳 **Tiếng Việt 100%**: Chuẩn hóa toàn bộ nhãn giao diện, bộ cỡ chữ tiêu chuẩn (`pt`), từ điển ký hiệu và phông chữ mượt mà.
|
|
15
|
+
- 🎨 **Giao diện hiện đại (Ribbon & Classic)**: Hỗ trợ 2 chế độ thanh công cụ dạng Ribbon (như MS Word) hoặc Classic, chế độ tối (Dark mode).
|
|
16
|
+
- 🔠 **Phông chữ hệ thống & Web Fonts chuẩn**: Tích hợp phông hệ thống mượt nét (`San Francisco`, `Segoe UI`, `Roboto`, `Arial`, `Times New Roman`...) không bị vỡ hay lệch dấu Tiếng Việt.
|
|
17
|
+
- 🗄️ **Lưu trữ linh hoạt**: Tự động mã hóa nhúng bình luận vào HTML/JSON hoặc tách riêng lưu vào cơ sở dữ liệu (Database).
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## 📦 Cài đặt
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install kindy-editor
|
|
25
|
+
# hoặc
|
|
26
|
+
pnpm add kindy-editor
|
|
27
|
+
# hoặc
|
|
28
|
+
yarn add kindy-editor
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## 🚀 Hướng dẫn tích hợp cho dự án khác (Integration Methods)
|
|
34
|
+
|
|
35
|
+
Thư viện `kindy-editor` hỗ trợ 4 cách tích hợp linh hoạt cho mọi môi trường dự án:
|
|
36
|
+
|
|
37
|
+
### Cách 1: Import Component (Vite / Webpack / Vue 3 SPA)
|
|
38
|
+
|
|
39
|
+
```vue
|
|
40
|
+
<template>
|
|
41
|
+
<div style="height: 100vh;">
|
|
42
|
+
<KindyEditor ref="editorRef" v-bind="editorOptions" />
|
|
43
|
+
</div>
|
|
44
|
+
</template>
|
|
45
|
+
|
|
46
|
+
<script setup>
|
|
47
|
+
import { ref } from 'vue'
|
|
48
|
+
import { KindyEditor } from 'kindy-editor'
|
|
49
|
+
import 'kindy-editor/style'
|
|
50
|
+
|
|
51
|
+
const editorRef = ref(null)
|
|
52
|
+
const editorOptions = ref({
|
|
53
|
+
locale: 'vi-VN',
|
|
54
|
+
document: {
|
|
55
|
+
title: 'Tài liệu mới',
|
|
56
|
+
content: '<h1>Nội dung ban đầu</h1>',
|
|
57
|
+
},
|
|
58
|
+
})
|
|
59
|
+
</script>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Cách 2: Đăng ký Global Vue Plugin (`main.js`)
|
|
63
|
+
|
|
64
|
+
```javascript
|
|
65
|
+
import { createApp } from 'vue'
|
|
66
|
+
import App from './App.vue'
|
|
67
|
+
import { useKindyEditor } from 'kindy-editor'
|
|
68
|
+
import 'kindy-editor/style'
|
|
69
|
+
|
|
70
|
+
const app = createApp(App)
|
|
71
|
+
|
|
72
|
+
// Đăng ký toàn cục component <KindyEditor />
|
|
73
|
+
app.use(useKindyEditor, {
|
|
74
|
+
locale: 'vi-VN',
|
|
75
|
+
theme: 'light',
|
|
76
|
+
})
|
|
77
|
+
|
|
78
|
+
app.mount('#app')
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Cách 3: Tích hợp SSR / Nuxt 3 (CommonJS Bundle)
|
|
82
|
+
|
|
83
|
+
```javascript
|
|
84
|
+
// Nuxt 3 Plugin hoặc Client-only component
|
|
85
|
+
import { KindyEditor } from 'kindy-editor' // Tự động resolve qua package.json "require"/"import"
|
|
86
|
+
import 'kindy-editor/style'
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Cách 4: Tích hợp qua CDN / Direct Script Tag (IIFE Bundle)
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<!DOCTYPE html>
|
|
93
|
+
<html>
|
|
94
|
+
<head>
|
|
95
|
+
<!-- 1. CSS -->
|
|
96
|
+
<link rel="stylesheet" href="https://unpkg.com/kindy-editor/dist/kindy-editor.css">
|
|
97
|
+
<!-- 2. Vue 3 -->
|
|
98
|
+
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
99
|
+
<!-- 3. Kindy Editor IIFE Bundle -->
|
|
100
|
+
<script src="https://unpkg.com/kindy-editor/dist/kindy-editor.iife.js"></script>
|
|
101
|
+
</head>
|
|
102
|
+
<body>
|
|
103
|
+
<div id="app">
|
|
104
|
+
<kindy-editor :locale="'vi-VN'"></kindy-editor>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<script>
|
|
108
|
+
const { createApp } = Vue;
|
|
109
|
+
const app = createApp({});
|
|
110
|
+
app.use(KindyEditor.useKindyEditor);
|
|
111
|
+
app.mount('#app');
|
|
112
|
+
</script>
|
|
113
|
+
</body>
|
|
114
|
+
### Cách 5: Tích hợp vào React.js & Next.js (Sử dụng `mountKindyEditor`)
|
|
115
|
+
|
|
116
|
+
Hàm `mountKindyEditor` cho phép bạn gắn `kindy-editor` vào bất kỳ thẻ HTML nào trong React.js / Next.js / Angular / Svelte mà **không cần cài thêm bất kỳ thư viện phụ thuộc nào**:
|
|
117
|
+
|
|
118
|
+
#### A. Trong React.js (Component Wrapper):
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
import React, { useEffect, useRef } from 'react'
|
|
122
|
+
import { mountKindyEditor } from 'kindy-editor'
|
|
123
|
+
import 'kindy-editor/style'
|
|
124
|
+
|
|
125
|
+
export function KindyEditorReact(props) {
|
|
126
|
+
const containerRef = useRef(null)
|
|
127
|
+
|
|
128
|
+
useEffect(() => {
|
|
129
|
+
if (!containerRef.current) return
|
|
130
|
+
// Gắn Editor vào DOM container
|
|
131
|
+
const instance = mountKindyEditor(containerRef.current, props)
|
|
132
|
+
// Cleanup khi component bị unmount
|
|
133
|
+
return () => instance.unmount()
|
|
134
|
+
}, [])
|
|
135
|
+
|
|
136
|
+
return <div ref={containerRef} style={{ width: '100%', height: '100vh' }} />
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
#### B. Trong Next.js (App Router / Pages Router):
|
|
141
|
+
|
|
142
|
+
Do trình biên tập tài liệu Rich Text phụ thuộc vào DOM trình duyệt (`window`, `document`), trong Next.js bạn cần nạp component dưới dạng Client Component với `next/dynamic` (`ssr: false`):
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
'use client'
|
|
146
|
+
|
|
147
|
+
import dynamic from 'next/dynamic'
|
|
148
|
+
|
|
149
|
+
// 1. Tắt SSR cho Editor component
|
|
150
|
+
const KindyEditor = dynamic(
|
|
151
|
+
() => import('./KindyEditorReact').then((mod) => mod.KindyEditorReact),
|
|
152
|
+
{ ssr: false }
|
|
153
|
+
)
|
|
154
|
+
|
|
155
|
+
export default function DocumentPage() {
|
|
156
|
+
return (
|
|
157
|
+
<main style={{ height: '100vh' }}>
|
|
158
|
+
<KindyEditor locale="vi-VN" />
|
|
159
|
+
</main>
|
|
160
|
+
)
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
## 💬 Hướng dẫn & API Hệ thống Bình luận (Comments)
|
|
167
|
+
|
|
168
|
+
### 1. Cơ chế hoạt động
|
|
169
|
+
|
|
170
|
+
Bình luận được lưu trực tiếp dưới dạng thẻ `span` chứa thuộc tính `data-comment` và `data-thread` trong tài liệu HTML/JSON:
|
|
171
|
+
|
|
172
|
+
```html
|
|
173
|
+
<span
|
|
174
|
+
data-comment="c1a2b3"
|
|
175
|
+
data-color="rgba(255, 213, 79, 0.4)"
|
|
176
|
+
data-thread='{"id":"c1a2b3","text":"Cần chỉnh sửa","replies":[]}'
|
|
177
|
+
class="kindy-comment"
|
|
178
|
+
>
|
|
179
|
+
Đoạn văn bản được bình luận
|
|
180
|
+
</span>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### 2. Các API tương tác với Bình luận
|
|
184
|
+
|
|
185
|
+
Thông qua `ref` của component `<KindyEditor ref="editorRef" />`:
|
|
186
|
+
|
|
187
|
+
```javascript
|
|
188
|
+
// 1. Thêm bình luận cho vùng bôi đen hiện tại
|
|
189
|
+
editorRef.value.addComment('Nội dung bình luận mới')
|
|
190
|
+
|
|
191
|
+
// 2. Thêm phản hồi (Reply) cho 1 bình luận
|
|
192
|
+
editorRef.value.addReply(commentId, 'Nội dung phản hồi')
|
|
193
|
+
|
|
194
|
+
// 3. Đánh dấu Đã giải quyết (Resolve) hoặc Mở lại
|
|
195
|
+
editorRef.value.resolveComment(commentId, true) // true: Đã giải quyết, false: Mở lại
|
|
196
|
+
|
|
197
|
+
// 4. Xóa bình luận
|
|
198
|
+
editorRef.value.removeComment(commentId)
|
|
199
|
+
|
|
200
|
+
// 5. Tập trung con trỏ & cuộn màn hình tới vị trí bình luận
|
|
201
|
+
editorRef.value.focusComment(commentId)
|
|
202
|
+
|
|
203
|
+
// 6. Lấy danh sách toàn bộ bình luận dưới dạng mảng Object
|
|
204
|
+
const comments = editorRef.value.getComments()
|
|
205
|
+
|
|
206
|
+
// 7. Đếm tổng số bình luận
|
|
207
|
+
const total = editorRef.value.getCommentCount()
|
|
208
|
+
|
|
209
|
+
// 8. Ẩn / Hiện thanh Sidebar bình luận
|
|
210
|
+
editorRef.value.toggleCommentSidebar(true) // true: hiện, false: ẩn
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
215
|
+
## 🗄️ Hướng dẫn tích hợp Cơ sở dữ liệu (Database Integration)
|
|
216
|
+
|
|
217
|
+
### Cách 1: Gộp chung vào Nội dung (Khuyên dùng - Đơn giản nhất)
|
|
218
|
+
|
|
219
|
+
Khi bạn lưu `content` thu được từ `onSave` hoặc `editorRef.value.getHTML()`, toàn bộ bình luận đã nằm sẵn bên trong thẻ `<span data-comment>`:
|
|
220
|
+
|
|
221
|
+
- **Lưu DB**: Lưu chuỗi `content` vào cột `content TEXT` trong bảng `documents`.
|
|
222
|
+
- **Đọc DB**: Truyền lại `content` vào `:options="{ document: { content: data.content } }"` ➔ Bình luận tự động hiển thị lại 100%.
|
|
223
|
+
|
|
224
|
+
### Cách 2: Tách Bình luận ra Bảng Database riêng
|
|
225
|
+
|
|
226
|
+
Nếu bạn muốn quản lý bình luận riêng trong bảng `comments` (để thông báo, phân quyền):
|
|
227
|
+
|
|
228
|
+
```javascript
|
|
229
|
+
const saveToBackend = async () => {
|
|
230
|
+
const htmlContent = editorRef.value.getHTML()
|
|
231
|
+
const commentsList = editorRef.value.getComments()
|
|
232
|
+
|
|
233
|
+
await fetch('/api/documents/save', {
|
|
234
|
+
method: 'POST',
|
|
235
|
+
headers: { 'Content-Type': 'application/json' },
|
|
236
|
+
body: JSON.stringify({
|
|
237
|
+
docId: 'doc_123',
|
|
238
|
+
content: htmlContent,
|
|
239
|
+
comments: commentsList, // Danh sách mảng comment object
|
|
240
|
+
}),
|
|
241
|
+
})
|
|
242
|
+
}
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
---
|
|
246
|
+
|
|
247
|
+
## 🛠️ Lệnh phát triển (Development Commands)
|
|
248
|
+
|
|
249
|
+
```bash
|
|
250
|
+
# Cài đặt phụ thuộc
|
|
251
|
+
npm install
|
|
252
|
+
|
|
253
|
+
# Chạy server phát triển (Dev server tại http://localhost:9000/kindy-editor)
|
|
254
|
+
npm run dev
|
|
255
|
+
|
|
256
|
+
# Đóng gói sản phẩm (Production build ra thư mục dist/)
|
|
257
|
+
npm run build
|
|
258
|
+
|
|
259
|
+
# Định dạng code
|
|
260
|
+
npm run format
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
---
|
|
264
|
+
|
|
265
|
+
## 📄 License & Credits
|
|
266
|
+
|
|
267
|
+
- Phát hành theo giấy phép [MIT License](./LICENSE).
|
|
268
|
+
- Dựa trên mã nguồn gốc [Umo Editor](https://github.com/umodoc/editor) bởi đội ngũ umodoc.
|
|
269
|
+
- Bản quyền thuộc về **Kindy** ([GitHub](https://github.com/hotienky)).
|
package/README.zh-CN.md
ADDED
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
<p style="text-align: center; margin: 2rem 0;">
|
|
2
|
+
<a href="https://www.umodoc.com" target="_blank"><img src="https://unpkg.com/@umoteam/editor-external@latest/static/logo.svg" alt="umodoc.com" width="280" /></a>
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<p style="text-align: center;">
|
|
6
|
+
<a href="https://github.com/umodoc/editor/blob/main/LICENSE" target="_blank"><img src="https://img.shields.io/npm/l/@umoteam/editor" /></a>
|
|
7
|
+
<a href="https://www.npmjs.com/package/@umoteam/editor" target="_blank"><img src="https://img.shields.io/npm/v/@umoteam/editor" /></a>
|
|
8
|
+
<a href="https://www.npmjs.com/package/@umoteam/editor" target="_blank"><img src="https://img.shields.io/npm/dm/@umoteam/editor" /></a>
|
|
9
|
+
<a href="https://www.npmjs.com/package/@umoteam/editor" target="_blank"><img src="https://img.shields.io/npm/unpacked-size/@umoteam/editor" /></a>
|
|
10
|
+
<a href="https://github.com/umodoc/editor/commits" target="_blank"><img src="https://img.shields.io/github/commit-activity/m/umodoc/editor" /></a>
|
|
11
|
+
</p>
|
|
12
|
+
<p style="text-align: center;"><a href="https://dev.umodoc.com/en/docs/editor">[English Documentation]</a> | 中文文档</p>
|
|
13
|
+
|
|
14
|
+
## 基本介绍
|
|
15
|
+
|
|
16
|
+
Umo Editor 是一个基于 Vue3 和 Tiptap3 的本土化开源文档编辑器，提供类似于 Microsoft Word 的在线编辑功能和浏览体验，专为国人用户设计。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式和普通 Web 模式、Markdown 语法、富文本编辑、多种格式的节点插入、页面样式设置、文档导出与打印等功能。
|
|
17
|
+
|
|
18
|
+
此外，Umo Editor 还支持自定义扩展、多语言设置和暗色主题。同时我们提供了单独的文本预览组件[Umo Viewer](https://github.com/umodoc/viewer)，用户可以在项目中使用该组件来预览文档。
|
|
19
|
+
|
|
20
|
+
Umo Editor 最大的特点是代码完全开源且自主可控，支持私有部署，您可以内网环境中使用，而无需担心数据安全问题。同时 Umo Editor 基于 Vue3 和 Tiptap3，两者都有丰富的生态系统和社区支持，在遇到问题时可以迅速得到解决。
|
|
21
|
+
|
|
22
|
+
作为一个独立的 Vue3 插件，Umo Editor 可以轻松集成到各类 Vue3 项目中。对于非 Vue3 项目，您可以通过 Iframe 将 Umo Editor 嵌入到您的项目中。见[在非 Vue3 项目中使用](https://dev.umodoc.com/cn/docs/editor/getting-started#在非-vue3-项目中使用)
|
|
23
|
+
|
|
24
|
+
[官网](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)
|
|
25
|
+
|
|
26
|
+
## Umo Editor Mobile
|
|
27
|
+
|
|
28
|
+
Umo Editor Mobile 是基于 Vue3 和 Tiptap3 构建的移动端文档编辑器，支持“预览 + 编辑 + 保存”完整链路，可直接作为业务系统中的独立编辑器落地。它不是对 Umo Editor 的简单裁剪，而是围绕触控场景重新设计的独立产品，具备保存状态机、自动保存、回退守卫、历史记录、国际化、主题与扩展能力，并在配置、事件、方法命名上尽可能与 Umo Editor 保持一致，帮助团队以更低成本实现多端统一。
|
|
29
|
+
|
|
30
|
+
如果您计划同时接入桌面端与移动端，建议优先在业务层抽象一层统一的编辑器适配层，以便复用文档模型、配置语义和保存链路，降低后续维护成本。
|
|
31
|
+
|
|
32
|
+
- 官网：[https://mobile.umodoc.com](https://mobile.umodoc.com)
|
|
33
|
+
- 移动端示例：[https://em.umodoc.com](https://em.umodoc.com)
|
|
34
|
+
- 开发文档：[https://dev.umodoc.com/cn/docs/mobile](https://dev.umodoc.com/cn/docs/mobile)
|
|
35
|
+
|
|
36
|
+
## 部分截图
|
|
37
|
+
|
|
38
|
+
**Umo Editor**
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
**Umo Editor Next**
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
了解 Umo Editor Next 更多功能，请访问：[https://www.umodoc.com](https://www.umodoc.com)。
|
|
55
|
+
|
|
56
|
+
## 在线体验
|
|
57
|
+
|
|
58
|
+
访问[https://www.umodoc.com/demo?pane=hide](https://www.umodoc.com/demo?pane=hide)快速体验。
|
|
59
|
+
|
|
60
|
+
## 示例项目
|
|
61
|
+
|
|
62
|
+
为了方便您快速上手 Umo Editor，我们提供了一个示例项目：https://github.com/umodoc/demo ，您可以在该项目中查看和运行 Umo Editor 的示例代码。
|
|
63
|
+
|
|
64
|
+
您也可以在 StackBlitz、CodeSandbox 和 Github Pages 上快速查看和运行该项目。
|
|
65
|
+
|
|
66
|
+
- 在 [StackBlitz](https://stackblitz.com/~/github.com/umodoc/demo?file=src/app.vue) 上查看和运行该项目。
|
|
67
|
+
- 在 [CodeSandbox](https://codesandbox.io/p/github/umodoc/demo/main?import=true) 上查看和运行该项目。
|
|
68
|
+
- 在 [Github Pages](https://umodoc.github.io/demo/) 上查看和运行该项目。
|
|
69
|
+
|
|
70
|
+
## 开发文档
|
|
71
|
+
|
|
72
|
+
请访问[https://dev.umodoc.com/cn/docs/editor](https://dev.umodoc.com/cn/docs/editor)。
|
|
73
|
+
|
|
74
|
+
## 设计理念
|
|
75
|
+
|
|
76
|
+
Umo Editor 的诞生旨在解决 Web 应用中文档编辑的复杂性，为 Web 项目提供类似 Microsoft Word 的强大编辑能力，同时保持 Web 应用的便捷性。无论是政企信息管理系统、学术研究撰写、团队文档协作、知识库管理还是个人笔记整理，Umo Editor 都能成为您的得力助手。
|
|
77
|
+
|
|
78
|
+
## 开源优势
|
|
79
|
+
|
|
80
|
+
- **免费使用**：Umo Editor 基于[MIT 许可证](https://github.com/umo-editor/umo-editor/blob/main/LICENSE)对所有开发者免费开放，无需担心版权问题。
|
|
81
|
+
- **持续更新**：Umo Editor 将持续迭代，不断优化功能，提升用户体验。
|
|
82
|
+
- **定制化开发**：开源意味着更大的灵活性，开发者可根据项目需求进行定制化开发，打造专属的文档编辑器。
|
|
83
|
+
|
|
84
|
+
## 核心特性
|
|
85
|
+
|
|
86
|
+
- 支持内网部署
|
|
87
|
+
- 零配置开箱即用
|
|
88
|
+
- 类似 Microsoft Word 的分页模式
|
|
89
|
+
- 轻量级
|
|
90
|
+
- 所见即所得
|
|
91
|
+
- 富文本编辑功能
|
|
92
|
+
- Markdown 语法支持
|
|
93
|
+
- 实用工具集成
|
|
94
|
+
- 演示模式
|
|
95
|
+
- 文档导出与分享
|
|
96
|
+
- 页面设置
|
|
97
|
+
- 支持打印及打印预览
|
|
98
|
+
- 支持自定义扩展
|
|
99
|
+
- 快捷键支持
|
|
100
|
+
- 主题定制
|
|
101
|
+
- 多语言设置
|
|
102
|
+
- 暗色主题
|
|
103
|
+
- 支持 Web 版式
|
|
104
|
+
- 单独的文档预览组件[Umo Viewer](https://github.com/umodoc/viewer)
|
|
105
|
+
|
|
106
|
+
更多详细介绍见[核心特性](https://dev.umodoc.com/cn/docs/editor/features)。
|
|
107
|
+
|
|
108
|
+
## 浏览器支持
|
|
109
|
+
|
|
110
|
+
| 浏览器 | 版本 | 支持情况 |
|
|
111
|
+
| ------------------------ | :----: | :-------: |
|
|
112
|
+
| Google Chrome | 最新版 | ✅ 支持 |
|
|
113
|
+
| Firefox | 最新版 | ✅ 支持 |
|
|
114
|
+
| Safari | 最新版 | ✅ 支持 |
|
|
115
|
+
| Microsoft Edge | 最新版 | ✅ 支持 |
|
|
116
|
+
| 360 极速浏览器 | 最新版 | ✅ 支持 |
|
|
117
|
+
| 各类国产浏览器的极速模式 | 最新版 | ✅ 支持 |
|
|
118
|
+
| Internet Explorer (IE) | 所有 | ❌ 不支持 |
|
|
119
|
+
|
|
120
|
+
## 环境支持
|
|
121
|
+
|
|
122
|
+
- **Node.js** (>=v18.x)
|
|
123
|
+
- **Vue** (>=v3.x)
|
|
124
|
+
- **Tiptap** (>=v3.x)
|
|
125
|
+
|
|
126
|
+
## 加入社区
|
|
127
|
+
|
|
128
|
+
我们鼓励用户加入 Umo Editor 的开源社区，共同参与到产品的开发和改进中。无论是提交 Bug 报告、功能请求还是代码贡献，都是我们社区宝贵的一部分。
|
|
129
|
+
|
|
130
|
+
您可以通过 [GitHub Discussions](https://github.com/umodoc/editor/discussions) 提交问题或意见。
|
|
131
|
+
|
|
132
|
+
或通过 [GitHub Issues](https://github.com/umodoc/editor/issues) 提交 Bug 报告。
|
|
133
|
+
|
|
134
|
+
## 贡献代码
|
|
135
|
+
|
|
136
|
+
Umo Editor 的发展离不开社区的支持，以下是为 Umo Editor 贡献过代码的贡献者名单，向他们致谢：
|
|
137
|
+
|
|
138
|
+
- [Umo Team](https://github.com/umodoc)：👨💻 核心开发者
|
|
139
|
+
- [china-wangxu](https://github.com/china-wangxu)：💪🏻 添加了许多重要功能
|
|
140
|
+
- [Cassielxd](https://github.com/Cassielxd)：💪🏻 添加了许多重要功能
|
|
141
|
+
- [Na'aman Hirschfeld](https://github.com/Goldziher)：🛠️ 贡献了部分代码
|
|
142
|
+
- [SevenDreamYang](https://github.com/SevenDreamYang)：🛠️ 贡献了部分代码
|
|
143
|
+
- [ChenErik](https://github.com/ChenErik)：🛠️ 贡献了部分代码
|
|
144
|
+
- [SerRashin](https://github.com/SerRashin)：🛠️ 添加了俄语支持
|
|
145
|
+
- [Sunny Wisozk](https://github.com/SunnyWisozk)：🛠️ 贡献了部分代码
|
|
146
|
+
- [Sherman Xu](https://github.com/xuzhenjun130)：🛠️ 贡献了部分代码
|
|
147
|
+
- [vace](https://github.com/vace)：🛠️ 贡献了部分代码
|
|
148
|
+
- [Mikasa33](https://github.com/Mikasa33)：🛠️ 贡献了部分代码
|
|
149
|
+
- [ohmua](https://github.com/ohmua)：🛠️ 贡献了部分代码
|
|
150
|
+
|
|
151
|
+
我们欢迎任何形式的贡献，包括但不限于提交 Bug 报告、功能请求、代码贡献等。
|
|
152
|
+
|
|
153
|
+
## 联系我们
|
|
154
|
+
|
|
155
|
+
如果您有任何疑问或建议，请通过以下方式联系我们。在此之前，建议您详细阅读本文档，以便了解如何使用 Umo Editor。
|
|
156
|
+
|
|
157
|
+
- 反馈：[GitHub Issues](https://github.com/umodoc/editor/issues)
|
|
158
|
+
- 社区：[GitHub Discussions](https://github.com/umodoc/editor/discussions)
|
|
159
|
+
- 邮件：[contact@umodoc.com](mailto:contact@umodoc.com)
|
|
160
|
+
|
|
161
|
+
## 技术交流
|
|
162
|
+
|
|
163
|
+
- Umo Editor 技术交流 1 群(即将满员)：[994500039](https://qm.qq.com/q/gFsQShETqE)
|
|
164
|
+
- Umo Editor 技术交流 2 群：[455825557](https://qm.qq.com/q/rzgt2bUcAE)
|
|
165
|
+
- Discord：[Umo Editor](https://discord.gg/k8GjuBBhXD)
|
|
166
|
+
|
|
167
|
+
## 支持我们
|
|
168
|
+
|
|
169
|
+
如果您觉得 Umo Editor 有用，请考虑通过以下方式支持我们：
|
|
170
|
+
|
|
171
|
+
- ⭐ 给[Umo Editor 仓库](https://github.com/umodoc/editor)点个 Star，表示对项目的支持。
|
|
172
|
+
- 🔗 如果您在项目中使用了 Umo Editor，请添加一个链接到 https://github.com/umodoc/editor 。
|
|
173
|
+
|
|
174
|
+
## Umo Team 出品
|
|
175
|
+
|
|
176
|
+
- [Umo Editor](https://dev.umodoc.com/cn/docs/editor): 基于 Vue3 和 Tiptap3 的本土化开源文档编辑器，专为国人用户设计。
|
|
177
|
+
- [Umo Viewer](https://dev.umodoc.com/cn/docs/viewer): 开源轻量级的 Umo Editor 文档查看器。
|
|
178
|
+
- [Umo Editor Next](https://dev.umodoc.com/cn/docs/next): Umo Editor 的企业级增强版，在延续编辑体验的基础上，进一步围绕真实业务落地做了更完整的能力升级，更适合希望把文档能力真正接入核心产品、支撑复杂企业场景的团队。
|
|
179
|
+
- [Umo Editor Server](https://dev.umodoc.com/cn/docs/server): 为增强 Umo Editor 功能，如多用户在线协作编辑、文档批注(评论)、文档导入导出等功能而开发的配套服务器端软件。
|
|
180
|
+
- [Umo Office Viewer](https://dev.umodoc.com/cn/docs/office-viewer): Umo Office Viewer 是一款 Office 文档查看器，支持在 Web 页面中查看包括 WPS 文档在内的 40 余种主流的办公文档。
|
|
181
|
+
- [Umo Office Convert](https://dev.umodoc.com/cn/docs/office-convert): 将 Office、WPS 等 40 余种办公文档转换为可在线查看的文档格式，可与 Umo Office Viewer 结合使用实现办公文档的在线预览。
|
|
182
|
+
|
|
183
|
+
## 定制开发
|
|
184
|
+
|
|
185
|
+
如果您需要定制化开发，请联系我们，我们可以提供付费的定制化解决方案和商业支持。详细信息请访问[定制开发](https://www.umodoc.com/customization)。
|
|
186
|
+
|
|
187
|
+
## 开源协议
|
|
188
|
+
|
|
189
|
+
Umo Editor 采用 [MIT 许可证](https://gitee.com/umodoc/editor/raw/main/LICENSE)，您可以免费使用、修改和分发本软件，但这不代表您可以随意删除版权信息，请保留 Umo Editor 的版权信息和界面上的链接地址，否则视为侵权，请支持开源项目。
|
|
190
|
+
|
|
191
|
+
如果您不想保留版权信息，请联系我们或者购买商业版本 [Umo Editor Next](https://dev.umodoc.com/cn/docs/next)。
|
|
192
|
+
|
|
193
|
+
本文档采用[CC BY-NC-SA 4.0 DEED 许可证](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans)发布。
|