PPTist是一个基于Vue3.x + TypeScript的在线演示文稿（幻灯片）应用，还原了大部分Office PowerPoint常用功能，支持文字、图片、形状、线条、图表、表格、视频、音频、公式等几种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和右键菜单，力求还原桌面应用级体验。支持导出本地PPTX文件，支持移动端基础编辑和预览，支持PWA。您可以在此基础上搭建自己的在线幻灯片应用。
上周我们分享了一个面向程序员的幻灯片演示应用程序，名为 Slidev。
文章传送门：为开发者设计的幻灯片演示工具Slidev
而今天我们要介绍的是一个适用于所有人的演示工具，名为 PPTist。PPTist 提供了各种美化选项，可以帮助您更加精美、流畅地修饰您的幻灯片，使其更加吸引人。无论您是开发人员还是其他领域的专业人士，PPTist 都是一个功能强大且易于使用的工具，能够让您的演示更加出色。
基础功能
-
功能列表
基础功能
-
• 历史记录（撤销、重做）
-
• 快捷键
-
• 右键菜单
-
• 导出本地文件（PPTX、JSON、图片、PDF）
-
• 导入导出特有 .pptist 文件
-
• 打印
幻灯片页面编辑
-
• 页面添加、删除
-
• 页面顺序调整
-
• 页面复制粘贴
-
• 背景设置（纯色、渐变、图片）
-
• 设置画布尺寸
-
• 网格线
-
• 标尺
-
• 画布缩放、移动
-
• 主题设置
-
• 幻灯片备注
-
• 幻灯片模板
-
• 翻页动画
-
• 元素动画（入场、退场、强调）
-
• 选择面板（隐藏元素、层级排序、元素命名）
幻灯片元素编辑
-
• 元素添加、删除
-
• 元素复制粘贴
-
• 元素拖拽移动
-
• 元素旋转
-
• 元素缩放
-
• 元素多选（框选、点选）
-
• 多元素组合
-
• 多元素批量编辑
-
• 元素锁定
-
• 元素吸附对齐（移动和缩放）
-
• 元素层级调整
-
• 元素对齐到画布
-
• 元素对齐到其他元素
-
• 多元素均匀分布
-
• 拖拽添加图文
-
• 粘贴外部图片
-
• 元素坐标、尺寸和旋转角度设置
-
• 元素超链接（链接到网页、链接到其他幻灯片页面）
文字
-
• 富文本编辑（颜色、高亮、字体、字号、加粗、斜体、下划线、删除线、角标、行内代码、引用、超链接、对齐方式、序号、项目符号、缩进、清除格式）-
-
• 行高
-
• 字间距
-
• 段间距
-
• 首行缩进
-
• 填充色
-
• 边框
-
• 阴影
-
• 透明度
-
• 竖向文本
图片
-
• 裁剪（自定义、按形状、按纵横比）
-
• 滤镜
-
• 着色（蒙版）
-
• 翻转
-
• 边框
-
• 阴影
-
• 替换图片
-
• 重置图片
-
• 设置为背景图
形状
-
• 替换形状
-
• 填充色
-
• 边框
-
• 阴影
-
• 透明度
-
• 翻转
-
• 编辑文字
线条
-
• 颜色
-
• 宽度
-
• 样式
-
• 端点样式
图表（柱状图、条形图、折线图、面积图、散点图、饼图、环形图）
-
• 图表转换
-
• 数据编辑
-
• 背景填充
-
• 主题色
-
• 坐标系与坐标文字颜色
-
• 其他图表设置
-
• 边框
-
• 图例
表格
-
• 行、列添加删除
-
• 主题设置（主题色、表头、汇总行、第一列、最后一列）
-
• 合并单元格
-
• 单元格样式（填充色、文字颜色、加粗、斜体、下划线、删除线、对齐方式）
-
• 边框
视频
-
• 预览封面设置
音频
-
• 图标颜色
-
• 自动播放
-
• 循环播放
公式
-
• LaTeX 编辑
-
• 颜色设置
-
• 公式线条粗细设置
幻灯片放映
-
• 全部幻灯片预览
-
• 画笔、黑板工具
-
• 计时器工具
-
• 激光笔
-
• 自动放映
-
• 演讲者视图
移动端
-
• 基础编辑
-
• 页面添加、删除、复制、备注、撤销重做
-
• 插入文字、图片、矩形、圆形
-
• 元素通用操作：移动、缩放、复制、删除、层级调整、对齐
-
• 元素样式：文字（加粗、斜体、下划线、删除线、字号、颜色、对齐方向）、填充色
-
-
• 基础预览
-
• 播放预览
-
构建镜像
如果你不想自己构建，可以跳过，直接阅读下一章节
这是一个前端项目，所以老苏用了一贯使用的标准 Dockerfile 模板
FROM node:16.16 as build-deps
MAINTAINER laosu<wbsu2003@gmail.com>
WORKDIR /app
COPY . ./
RUN npm install
RUN npm run build
FROM nginx:1.12-alpine
COPY --from=build-deps /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
构建镜像和容器运行的基本命令如下👇
# 下载代码
git clone https://github.com/pipipi-pikachu/PPTist.git
# 进入目录
cd PPTist
# 构建镜像
docker build -t wbsu2003/pptist:v1 .
# 运行容器
docker run -d \
--name pptist \
-p 3277:80 \
wbsu2003/pptist:v1
安装
在群晖上以 Docker 方式安装。
在注册表中搜索 pptist ，选择第二个 wbsu2003/pptist，版本选择 latest。
端口
本地端口不冲突就行，不确定的话可以用命令查一下
# 查看端口占用
netstat -tunlp | grep 端口号
| 本地端口 | 容器端口 |
|---|---|
3277 |
80 |
命令行安装
如果你熟悉命令行，可能用 docker cli 更快捷
# 运行容器
docker run -d \
--restart unless-stopped \
--name pptist \
-p 3277:80 \
wbsu2003/pptist
也可以用 docker-compose 安装，将下面的内容保存为 docker-compose.yml 文件
version: '3'
services:
pptist:
image: wbsu2003/pptist
container_name: pptist
restart: unless-stopped
ports:
- 3277:80
然后执行下面的命令
# 新建文件夹 pptist
mkdir -p /volume1/docker/pptist
# 进入 pptist 目录
cd /volume1/docker/pptist
# 将 docker-compose.yml 放入当前目录
# 一键启动
docker-compose up -d
运行
在浏览器中输入 http://群晖IP:3277 就能看到主界面
左上角菜单
右侧下载按钮支持各种格式导出
导入 pptx 文件虽然还是测试版，但效果也还行
其他功能和 PPT 是差多的，也支持特效切换和动画功能，官方提供了功能列表：https://github.com/pipipi-pikachu/PPTist#-功能列表
参考文档
pipipi-pikachu/PPTist: 基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，实现在线PPT的编辑、演示。支持导出PPT文件。
地址：https://github.com/pipipi-pikachu/PPTistPPTIST – 在线演示文稿
地址：https://pipipi-pikachu.github.io/PPTist/
