@wanghe1995/docx-editor-ui

v1.2.8

Published

6 days ago

docx editor完整ui编辑器

Downloads

1,209

0High
0Medium
0Low

wanghe1995

docx-editor-ui editor docx-editor

DocxEditor UI

功能完整的在线协作文档编辑器 UI 组件库

📖 项目简介

DocxEditor UI 是一款基于 Vue 3 + Element Plus 构建的现代化文档编辑器 UI 组件库，提供类似 Microsoft Word 的完整编辑体验。它与 @wanghe1995/docx-editor-core 核心编辑器无缝集成，支持多人实时协作、AI 智能编辑、图表可视化等高级功能。

✨ 核心特性

🎨 完整 UI 界面 - 提供工具栏、侧边栏、对话框、覆盖层等完整编辑器界面组件
👥 实时协作 - 基于 Yjs CRDT + Hocuspocus 实现多人协同编辑
🤖 AI 智能编辑 - 支持选中内容的智能修改、润色、翻译等功能
📊 图表可视化 - 内置 ECharts 图表组件，支持多种图表类型插入与编辑
🔒 文档保护 - 支持密码保护文档，防止未授权编辑
📱 响应式设计 - 适配不同屏幕尺寸，支持移动端使用
🌙 主题切换 - 支持亮色/暗色主题切换
🛠️ 丰富组件 - 提供代码块、视频播放、二维码生成等多种实用组件

🏗️ 技术架构

核心技术栈

框架: Vue 3.5.27 + TypeScript 4.9.5
UI 组件库: Element Plus 2.13.1
图标: Element Plus Icons, Material Design Icons
构建工具: Vite 5.4.10
样式方案: vite-plugin-css-injected-by-js (CSS 内联注入)

依赖库

核心编辑器: @wanghe1995/docx-editor-core ^1.0.12
AI 插件: @wanghe1995/docx-editor-ai ^1.0.1
协同编辑: @wanghe1995/docx-editor-collaboration ^1.0.0
图表: @wanghe1995/docx-editor-chart
文档处理: docx ^9.5.1
代码高亮: PrismJS 1.30.0
视频播放: Plyr ^3.7.8
二维码: qrcode ^1.5.4
压缩工具: JSZip ^3.10.1

📦 安装

npm 安装

npm install @wanghe1995/docx-editor-ui element-plus @element-plus/icons-vue prismjs vue

yarn 安装

yarn add @wanghe1995/docx-editor-ui element-plus @element-plus/icons-vue prismjs vue

pnpm 安装

pnpm add @wanghe1995/docx-editor-ui element-plus @element-plus/icons-vue prismjs vue

🚀 快速开始（仅对象式接入）

import { WordEditor, type DocxEditorUiInitialDocument, type CollaborationOptions } from '@wanghe1995/docx-editor-ui'

const initialDocument: DocxEditorUiInitialDocument = {
  meta: {
    id: 'doc-123',
    path: '/demo/doc-123.docx',
    status: 'edit',
    name: '示例文档.docx'
  },
  format: 'canvas',
  content: { main: [] }
}

const collaboration: CollaborationOptions = {
  serverUrl: 'ws://127.0.0.1:1234',
  docId: 'doc-123',
  user: { userId: 'user-001', userName: '张三', color: '#4CAF50' }
}

const editor = new WordEditor({
  container: '#app',
  initialDocument,
  collaboration,
  onReady: () => console.log('ready'),
  onChange: (payload) => console.log('change', payload),
  onMetaChange: (payload) => console.log('meta', payload),
  onStatusChange: (payload) => console.log('status', payload)
})

⚙️ 对外 API（仅对象式）

Options

interface Options {
  container: string | HTMLElement
  initialDocument?: DocxEditorUiInitialDocument
  collaboration?: CollaborationOptions
  onReady?: (payload: any) => void
  onChange?: (payload: { content: any; meta: any; raw: any }) => void
  onMetaChange?: (payload: any) => void
  onStatusChange?: (payload: any) => void
}

WordEditor

class WordEditor {
  constructor(options: Options)
  setInitialDocument(initialDocument?: DocxEditorUiInitialDocument): void
  setCollaboration(collaboration?: CollaborationOptions): void
  executeCommand(command: string, ...args: any[]): any
  getApi(): any
  destroy(): void
}

🔧 开发命令

npm run dev
npm run lib
npm run build:ui
npm run lint

📌 说明

文档内容请求与保存由宿主项目负责。
编辑器实例只负责渲染、命令执行与事件回传。
本包不再提供组件式公开接入说明，统一采用对象式接入。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme