# uni-pptx

**Repository Path**: lucky4018/uni-pptx

## Basic Information

- **Project Name**: uni-pptx
- **Description**: 本应用基于 konva 实现Web PPT 编辑器，以实现设计编辑、预览、切换、动画等核心功能。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 13
- **Created**: 2024-09-12
- **Last Updated**: 2024-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align='center'>
    <img src="/public/icon.svg" />
</p>

<h1 align='center' style="font-size: 30px;">UniPPT - 在线演示文稿</h1>

🔄 [English](/README.md) | 中文


**官网:** https://wf0.github.io/unippt.html


**体验地址:** https://wf0.github.io/unippt-demo.html


## © 版权说明

1. 本项目基于 Apache License 2.0 协议，可免费使用，但请勿用于商业用途；

2. 项目在架构上，借鉴了 [canvas-editor](https://hufe.club/canvas-editor-docs/) 的优秀思想，仅用于系统架构设计部分；

3. 项目在页面布局、静态svg、图标上，直接或间接使用了[PPTist](https://pipipi-pikachu.github.io/PPTist/)的资源，感谢原作者;

4. **如果发现项目侵权部分，请及时联系删除**，其他依赖均为开源项目，请查看对应开源项目的许可证。


## 📖 项目简介

1. Unite PowerPoint，是基于 Konva（canvas渲染方案）的 Web 在线演示文稿（幻灯片）编辑器；


2. 项目力争还原大部分 Office PowerPoint 常用功能，支持文字、图片、多媒体资源、形状、折线、统计图、表格、公式等常见元素类型，支持在 Web 端实现幻灯片的编辑、预览、导出、分享、协作等功能；

3. 为满足不同用户群体的需求，不仅提供了 npm 包，支持在 Vue、React、H5 等前端框架中使用，还提供了完整的项目模板，可快速搭建在线演示文稿项目；

4. 本项目开箱即用，拥有完整的官方 API 文档，方便开发者二次开发；

5. 同类优秀产品：[PPTist](https://pipipi-pikachu.github.io/PPTist/)、[Slidev](https://sli.dev/)、[revealjs](https://revealjs.com/) 等（**排名不分先后**）。



## 🚀 项目运行

```bash
### 下载依赖
npm install

### 运行项目
npm run dev 

### 打包项目
npm run build ## 打包成项目类型
npm run lib ## 打包成库类型
```

## 💼 项目依赖

```json
"devDependencies": {
    "eslint": "^9.9.0", // eslint 语法检查器
    "less": "^4.2.0", // less 预处理器
    "typescript": "^5.5.4", // ts 编译器
}

"dependencies": {
    "gsap": "^3.12.5", // 动画库
    "html-to-image": "^1.11.11", // html 转图片
    "konva": "^9.3.14", // konva 绘图库
    "mathlive": "^0.101.0", // 公式编辑器
    "quill": "^2.0.2", // 富文本编辑器
    "vite": "^5.4.2" // vite 构建工具
},

```

## 📚 功能列表

**备注：✅ 为已实现功能，❌ 为未实现功能**

#### 协同
- ❌ 用户光标协同
- ❌ 评论交流协同
- ❌ 幻灯片协同编辑
- ❌ 文件分享/加入协同

#### 基础功能
- ✅ 历史记录（撤销、重做）
- ✅ 快捷键（系统快捷键、自定义快捷键）
- ✅ 右键菜单（支持画布菜单及元素菜单）
- ✅ 自定义系统主题颜色（提供 :root 主题定制方案）
- ✅ 幻灯片设计（背景设置、网格设置、预设主题）
- ❌ 文件导出（PPTX、PDF、图片）
- ❌ 幻灯片主题


#### 幻灯片页面编辑
- ✅ 幻灯片页面新增与删除
- ✅ 画布网格线
- ✅ 翻页动画
- ✅ 元素动画（入场、退场、强调）
- ✅ 幻灯片顺序调整（支持 API、拖拽方式实现）
- ❌ 演讲者备注（富文本）
- ❌ 幻灯片模板
- ❌ 画布缩放、移动


#### 幻灯片元素编辑

**基础功能**
- ✅ 元素添加、删除、拖拽、移动、旋转、缩放
- ✅ 元素多选、框选、单选
- ✅ 元素吸附对齐（移动和缩放）
- ✅ 元素属性设置（宽高、位置、边框、填充、文本等）
- ✅ 拖拽添加图文
- ✅ 元素复制粘贴
- ❌ 元素组合、锁定、批量编辑
- ❌ 元素超链接（链接到网页、链接到其他幻灯片页面）


**文字**
- ✅ 普通文本编辑
- ✅ 富文本编辑
- ✅ 属性设置

**图片**
- ✅ 图片上传（本地、网络）
- ❌ 裁剪（自定义、按形状、按纵横比）
- ❌ 滤镜、着色


**线条**
- ❌ 直线、基础折线/曲线
- ❌ 属性设置


**统计图**
- ✅ 柱状体、折线图、饼图、雷达图
- ✅ 图表转换、图表配置
- ❌ 环形图、面积图、散点图

**表格**
- ✅ 表格数据编辑
- ✅ 动态增删行列


**公式**
- ✅ LaTex 公式编辑
- ✅ 直接编辑公式，所见即所得


#### 幻灯片放映
- ✅ 幻灯片预览(当前预览、从头预览)
- ❌ 屏幕录制


## 📝 计划实现功能


## 🔗 相关资料

- [latex](https://cortexjs.io/mathlive/)
- [pptxtojson](https://github.com/pipipi-pikachu/pptxtojson)
- [PPTist Github](https://github.com/pipipi-pikachu/PPTist)
- [PPTist 体验地址](https://pipipi-pikachu.github.io/PPTist/)
- [基于 Konva 实现Web PPT 编辑器（一）](https://blog.csdn.net/weixin_47746452/article/details/141090611)
- [基于 Konva 实现Web PPT 编辑器（二）](https://blog.csdn.net/weixin_47746452/article/details/141227563)

<!-- https://github.com/pipipi-pikachu/PPTist -->

<!-- pptist: https://pipipi-pikachu.github.io/PPTist/ -->

<!-- pptxtojson: https://github.com/pipipi-pikachu/pptxtojson (将 .pptx 文件转为可读的 json 数据的 JavaScript 库) -->

<!-- 重写了 image 构造方法 -->

<!-- 文本编辑实现方案: contextEditorAble -->

<!-- 重写 Konva Graph 进行统一事件处理（特别注意 addShape 事件） -->

<!-- Command API -->

<!-- 快捷键 -->

<!-- 顶部菜单、右键菜单、任何菜单事件，都应该回归到 Command API，既便于管理，又可以复用 Command API -->

<!-- 优化方向 DOM 操作注意事件的释放 -->

<!-- 更加便捷的主题设置方法 （给出系列色生成方案） -->

<!-- 推荐尺寸：1000 * 600 以上 -->

<!-- 公式 ： https://cortexjs.io/mathlive/ latex 字体显示异常问题：从当前包的 fonts 文件夹复制到 public 下 -->

<!-- 表格的使用 -->

<!-- 统计图的使用 -->