基于 Vue3.x + TypeScript 的在线演示文稿应用。实现PPT幻灯片的在线编辑、演示。

Last update: Aug 11, 2022

🎨 PPTist

一个基于 Vue3.x + TypeScript 的在线演示文稿应用,还原了大部分PPT常用功能,支持 文字、图片、形状、线条、图表、表格 6种最常用的元素类型,每一种元素都拥有高度可编辑能力,同时支持丰富的快捷键和右键菜单,尽可能还原本地桌面应用的使用体验。

你可以对它进行二次开发,打造属于自己的 在线演示文稿应用 或者 在线设计工具(二次开发文档正在编写中)。

在线体验地址(优先更新):https://www.pptist.cn/

如果网络状态不佳,可以访问国内镜像:https://pptist.gitee.io/

Github仓库:https://github.com/pipipi-pikachu/PPTist

🚀 项目运行

npm install

npm run serve

注意:要求vue版本必须为3.0.4且ant-design-vue版本必须为2.0.0,否则会出现下拉菜单样式异常 或 选择器在生命周期销毁阶段发生异常。这可能是ant-design-vue的一个bug。

📜 功能列表

通用功能

  • 历史记录
  • 快捷键
  • 右键菜单
  • 主题设置

幻灯片页面编辑

  • 页面添加、删除
  • 页面顺序调整
  • 页面复制粘贴
  • 背景设置(纯色、渐变、图片)
  • 网格线

幻灯片元素编辑

  • 元素添加、删除
  • 元素复制粘贴
  • 元素拖拽移动
  • 元素旋转
  • 元素缩放
  • 元素多选(框选、点选)
  • 多元素组合
  • 元素锁定
  • 元素吸附对齐(移动和缩放)
  • 元素层级调整
  • 元素对齐到画布
  • 元素对齐到其他元素
  • 拖拽添加图文
  • 粘贴外部图片
  • 元素坐标、尺寸和旋转角度设置

文字

  • 富文本编辑(颜色、高亮、字体、字号、加粗、斜体、下划线、删除线、角标、行内代码、引用、对齐方式、项目符号、清除格式)
  • 行高
  • 字间距
  • 填充色
  • 边框
  • 阴影
  • 透明度

图片

  • 裁剪(自定义、按形状、按纵横比)
  • 滤镜
  • 翻转
  • 边框
  • 阴影
  • 替换图片
  • 重置图片
  • 设置为背景图

形状

  • 填充色
  • 边框
  • 阴影
  • 透明度
  • 翻转

线条

  • 颜色
  • 宽度
  • 样式
  • 端点样式

图表(柱状图、折线图、饼图)

  • 数据编辑
  • 背景填充
  • 主题色
  • 坐标系与坐标文字颜色
  • 其他设置(柱状图转条形图、折线图转面积图、折线图转散点图、饼图转环形图、折线图开关平滑曲线)
  • 边框

表格

  • 行、列添加删除
  • 行列数设置
  • 主题设置(主题色、表头、汇总行、第一列、最后一列)
  • 合并单元格
  • 单元格样式(填充色、文字颜色、加粗、斜体、下划线、删除线、对齐方式)
  • 边框

幻灯片放映

  • 翻页动画
  • 元素入场动画
  • 全部幻灯片预览
  • 画笔工具

💡 常见问题

Q. 为什么xxx快捷键没有作用?

A. 部分快捷键需要聚焦到指定区域才会生效,例如焦点在左边缩略图列表才能使用操作页面的快捷键,焦点在画布区域才能使用操作元素的快捷键。

Q. 为什么粘贴没有作用?

A. 请注意允许浏览器访问系统剪贴板。

Q. 为什么浏览器刷新或重新打开后,之前做的PPT没有了?

A. 该演示项目是纯前端部署的,不会保存数据。

Q. 如何调整幻灯片页面的顺序?

A. 按住左侧缩略图可进行拖拽调整顺序。

Q. 为什么插入图片后会出现操作卡顿的情况?

A. 由于本演示项目不依赖后端,插入本地图片实际引用的是Base64,导致数据体积非常大,在真正的生产环境中应该上传图片后引用图片地址,就不会出现这样的情况了。

Q. 为什么应用预置主题后没有效果?

A. 设置预置主题的作用是使新添加的元素和页面应用主题样式,不会对已有的元素和页面生效(字体颜色除外),您可以使用“应用主题到全部”功能,将当前主题应用到当前全部页面中。

🔧 项目依赖

ant-design-vue -- UI库

lodash -- 工具库

prosemirror -- 富文本编辑框架,用于文本元素的富文本编辑

chartist -- svg图表库,用于图表元素

tinycolor2 -- 颜色处理工具

dexie -- indexedDB 包装器,用于记录历史操作

mitt -- 自定义事件发射/监听

animate.css -- CSS动画库

vuedraggable -- 基于vue的拖拽插件,用于调整页面顺序等

crypto-js -- 加密函数库,用于加解密剪贴板内容

clipboard -- 用于复制内容到剪贴板

icon-park -- 图标库

开源协议

MIT License

GitHub

https://github.com/pipipi-pikachu/PPTist
Comments
  • 1. 未来计划(长期)

    短期内主要还是会把重心放在导入功能的研究上。

    在这里简单说下后续的一些想法,例如:

    1、公式元素,这个还没想好具体是做成latex编辑还是可视化编辑。如果做可视化编辑,我看过现有的一些轮子,感觉体验上都不怎么样,所以可能会选择自己实现。

    2、动画的强化,目前仅支持入场动画,后面希望补充上退场动画和强调动画,另外是动画的入场方式不仅仅是现在的顺序触发,还需要有跟随上一个动画触发,自动触发等。

    3、更多的导出格式,例如PDF、HTML文件。

    暂时就这些,再想到其他的会补充在后面。

    Reviewed by pipipi-pikachu at 2021-08-05 10:12
  • 2. 当PPT页数过多的时候,点击切换,页面加载延迟很高

    1. 当左边的Thumbnails对应后台list很多的时候,点击切换加载Canvas很慢
    2. 希望“mutations.ts”中针对这个“MutationTypes.UPDATE_SELECTED_SLIDES_INDEX”中切换index的时候,不是重新加载,而是做成原先display:none属性,切换的时候,针对index动态展示。感恩!
    Reviewed by fengjinyou at 2021-09-10 02:38
  • 3. 播放者视图的反馈,供参考

    感谢 @pipipi-pikachu 的快速更新!播放试图很棒。经过测试给一点反馈,供参考。 1、在PC上(非触摸屏)进入播放者视图界面只能点击下方slide而不能用鼠标拖拽,这样就会有一个问题,当slide页面过多部分隐藏的时候只能顺序点击才能找到后面(隐藏部分)的slide,比较麻烦。可否增加鼠标拖拽,这样的用户体验会比较好,便于快速找到后面某一个slide。BTW,iPad(iPad pro)进入播放者视图界面后可以用手指滑动slide,体验不错! 2、在演讲界面可否考虑增加一个激光笔效果的 cursor,这个功能在实际的演讲中非常实用。 3、画笔是一个很好的功能,在很多场景下也非常有用,但是画笔勾勒的标注不是跟随所在页面的,如果不删除会随着翻页出现在每一页slide上包括黑板,这个体验一下子打了很大折扣。 4、黑板写字不方便,要是能简单的实现键盘打字就好了。

    非常感谢🙏

    Reviewed by BOKE2014 at 2022-03-28 03:05
  • 4. 建议作者恢复文字框以前的状态

    目前不打字文字框自动消失在实际场景里有点麻烦:

    1、添加一个文字框,如果想输入一些符号,如:字母、序号、数学、箭头、图形等,鼠标一离开文字框就消失了非常不方便。只能先随便敲几个字加了符号再删除文字。 2、添加文字框后不一定立刻就输入,更多的时候是先拖动文字框到合适的位置再输入,特别是空白模版的时候,现在的设置就是得强迫输入再调节位置,比较麻烦。

    谢谢

    Reviewed by BOKE2014 at 2022-06-08 15:07
  • 5. 作者有空可以看看这个PPT项目的实时投票

    这也是一个GitHub上的项目,总体比较粗糙,可用性不强,但是有个实时投票还是不错的,做个演讲还可以和观众实时互动一下,作者有空看看能否在PPTist上面有个类似的功能。

    https://app.deckdeckgo.com/

    https://github.com/deckgo/deckdeckgo

    Reviewed by BOKE2014 at 2022-06-07 13:49
  • 6. [Feature request]demo Blogger

    注意 Blogger hello,I would like to ask you how SVG works by following the synchronization function on the left side of your slide,Convenient to guide no

    Reviewed by goddits at 2022-05-26 12:57
  • 7. 导出图片,随着页面增多,图片宽度会减少

    注意

    1. 请在提问前先尝试搜索历史 Issue 记录,避免重复的问题。
    2. 请确保提问时已经仔细阅读过 README 中的相关事项。

    问题描述
    请尽量简洁、完整地描述你遇到的bug,至少包括以下部分(如有必要,可提供截图):

    1. 问题触发的条件/操作流程
    2. 期望表现与实际表现

    环境信息
    至少包含以下部分:

    1. 系统环境(Mac or Windows)
    2. 浏览器环境(如:Chrome v89.0.4389.114)
    Reviewed by EastSmartEducation at 2022-05-20 02:49
  • 8. [Bug report]表格元素切换其他元素报错问题

    问题描述
    创建表格后 点击或创建其他元素 会报错 image 查了下原因 emitter.on(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells => updateSelectedCells(cells)) updateSelectedCells此方法中表格丢失焦点也会调用 虽然代码执行emitter.off卸载但是 会先执行 updateSelectedCells 当执行的时候 handleElement已经变成了其他的元素 handleElement.value.data[rowIndex][colIndex].style就报错了 貌似执行中报错导致数据更新不掉 之后的点击会一直报错

    image 我加了个判断貌似可以了 但不知道会不会影响其他地方
    大佬看看

    Reviewed by missile-xuan at 2021-06-08 07:15
  • 9. 移动端编辑器反馈

    1、iPad layout:Safari,Firefox,Chrome和Edge

    (1)Safari和Firefox:横屏时保持了PC的layout,功能丰富,比较好用。竖屏时仍然是PC端layout但是slide的工具条的layout混乱了,如果竖屏是切换到手机端layout,或者折叠工具条有下拉菜单就完美了。 WechatIMG360 WechatIMG362

    (2)Chrome和Edge:横竖屏都是手机端的layout,作者能否考虑做些设置iPad横屏时保持PC的layout,竖屏时切换到手机的layout?

    WechatIMG363 WechatIMG364

    2、手机端:正常,可用,基本的操作没有问题。

    3、字体选择 iPad端的字体选择比PC端少很多(应该是统一按照手机端做的),有些不方便,作者可否考虑给iPad补充一些? WechatIMG361

    谢谢!

    Reviewed by BOKE2014 at 2022-06-06 01:34
  • 10. 【BUG】由于复制粘贴撤销存在indexDB,导致双开或者多个编辑区之间ppt复制粘贴撤销异常

    问题明细

    1. 课件复制粘贴步骤数据保存在indexDB,并且数据库名为:SnapshotDatabase ,表:snapshots,多个页面公用同一个数据表导致在不同页面复制粘贴撤销异常显示。
    import Dexie from 'dexie'
    import { Slide } from '@/types/slides'
    
    export interface Snapshot {
      index: number;
      slides: Slide[];
    }
    
    class SnapshotDatabase extends Dexie {
      public snapshots: Dexie.Table<Snapshot, number>
    
      public constructor() {
        super('SnapshotDatabase')
        this.version(1).stores({
          snapshots: '++id'
        })
        this.snapshots = this.table('snapshots')
      }
    }
    
    export const snapshotDB = new SnapshotDatabase()
    
    1. 具体场景: 首先渲染A课件,然后渲染B课件,数据库中数据为B课件缓存,然后把B课件部分ppt复制粘贴到A课件,然后一直撤销,因为数据库初始渲染A被B覆盖了,所以在A课件页面一直撤销就会显示B课件了。

    期望结果 1、希望每次进入创建新表,并对超过一定日期的数据表进行删除,比如设定一天,每次进入删除一天前的数据表,既可以解决双开或者更能多编辑页面之间的复制粘贴,也可以通过定时清理过时表,减少垃圾存储。

    Reviewed by kankanol1 at 2022-05-25 09:56
  • 11. fix: detect immediately full screen is not work after entering full screen #106

    is useFullscreen.ts file

      const windowResizeListener = () => {
        // fullscreenState.value is undefined and emit exitScreening in safari
        fullscreenState.value = isFullscreen()
        if (!fullscreenState.value && escExit.value) exitScreening()
    
        escExit.value = true
      }
    
    Screen Shot 2022-05-24 at 14 14 25
    Reviewed by claviering at 2022-05-24 06:55
🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

??????vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

Aug 13, 2022
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.

iooc-admin(element-plus) 演示地址(数据库五分钟重置一次) ⚡️ vue3.x + element-plus + TypeScript ⚡️ vue3.x + element-plus + TypeScript (视频) 项目地址 ⚡️ vue3.x + element-pl

Jun 20, 2021
Vue-typescript-starter-project - Vue3, Vuex, Vue-router starter project using typescript

Vue Typescript Starter Project Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production

Jan 1, 2022
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0,  ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

VUE VBEN ADMIN2.0 Chinese | English CHANGELOG Introduction GitHub Thin Preview Documentation Preinstallation Environmental requirements UI framework I

Aug 12, 2022
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0,  ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

Aug 13, 2022
🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus + typescript
🎉 A new generation vue3 admin template using  vue3(script-setup) + vite2 + element-plus + typescript

vue3-admin-ts English | 中文 A basic vue3 admin template with vite2 & Element-Plus UI & axios & svg-icon& permission control & lint A new generation adm

Aug 15, 2022
wt-vite-vue3-element-ruoyi-ts 若以 若依 typescript ts vue3 vue vite vite2.0 模版

wt-vite-vue3-element-ruoyi-ts ?? 全网首发 ?? 基于 Vite 2.0 + Vue 3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 Project setup npm i -g

May 5, 2022
A Vue3 Todo Web Application with typescript, Vue3, Pinia, Tailwindcss

Vue3 Todo Web Application A Vue3 Todo Web Application with typescript, Vue3, Pinia, Tailwindcss How to run? npm install # or yarn yarn npm run dev #

Aug 12, 2022
Vue3-ts-boilerplate - Packed Vue3 boilerplate with storybook, unit testing, generators, typescript, pinia, vue-router

Vue3 TS Boilerplate This template should help get you started developing with Vue 3 in Vite. Recommended IDE Setup VSCode + Volar (and disable Vetur).

Mar 10, 2022
Tauri-vue3-vuetify3-template - Power by tauri add vue3 vuetify3 typescript cross platform gui template
Tauri-vue3-vuetify3-template - Power by tauri add vue3 vuetify3 typescript cross platform gui template

First EVN 1、install cargo curl https://sh.rustup.rs -sSf | sh 2、install cargo-ta

Aug 9, 2022
Vue3-music: Main technology stack: Vue3 TypeScript VueRouter Pinia Naive-ui axios
Vue3-music: Main technology stack: Vue3 TypeScript VueRouter Pinia Naive-ui axios

Vue3-music: Main technology stack: Vue3 TypeScript VueRouter Pinia Naive-ui axios

Mar 31, 2022
vue3 表单生成;vue3 elementui-next 自动生成代码; vue3 form make

简介 本项目以 https://github.com/JakHuang/form-generator 为基础,对vue3 和elementu-next 进行了适配 在线预览 地址 使用方法 main.js import { createApp } from 'vue' import App from

Aug 11, 2022
a front end template development by vue3.x typescript vite2.x vuex4.x vue-router 4.x mock element-plus
a front end template development by vue3.x typescript vite2.x vuex4.x vue-router 4.x mock element-plus

Vue 3 + Typescript + Vite + Vuex + Vue-Router This template should help get you started developing with Vue 3 and Typescript and Vuex and Vu

Jun 24, 2022
uni-app + vue3.0 + typescript + vue-cli 仿手机QQ聊天 qq表情包

uni-chat 基于composition-api + uni-app + ts + vue-cli 开发,在uni-app中使用vue3.0的语法。

Aug 4, 2022
这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板库(vue2.x请切换vue-prev-admin分支)
这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板库(vue2.x请切换vue-prev-admin分支)

介绍 基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板,希望减少工作量,帮助大家实现快速开发。 线上预览 vue3.x 版本

Aug 12, 2022
BookerUI-Next 是一个基于 Vue3 + TypeScript 的 UI 组件库
BookerUI-Next 是一个基于 Vue3 + TypeScript 的 UI 组件库

BookerUI-Next 组件介绍 BookerUI-Next 是一个基于 Vue3 + TypeScript 的 UI 组件库,这是我在Vue3 和 TypeScript 的项目过程中,开发的一个UI框架。

Mar 13, 2022
6pan 6盘小白羊 第二版 vue3+antd+typescript
6pan 6盘小白羊 第二版 vue3+antd+typescript

6pan 6盘小白羊 第二版 vue3+antd+typescript

Aug 8, 2022
a lite vue3.0 admin template,there is no typescript !

Vuejs3+Vite2+ElementPlus后台管理系统模板 简介 一个免费开源的后台管理系统模板。使用最新的主流技术开发,开箱即用(主要还是用于学习参考!),主要向以下两个高star的后台管理系统模板进行学习,并根据需求进行取舍和优化改进。 vue-vben-admin 使用了最新的vue3,

Aug 15, 2022
基于 Vue3、Vite2、TypeScript、VueUse 的仿网易云客户端播放器(包含开发记录文档)。

vnext-netease-music 没错又是仿网易云,那么多了网易云项目了还写?纯粹是为了学习罢了。 之前学习的 Vue3、Vite2、TypeScript 一直没有新项目可用,控制不住自己的小手了必须写写,也为了要看源码熟悉熟悉语法。 整体代码写的比较简洁,功能也比较简洁,想练习的可以继续扩展

Jun 23, 2022
Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案
Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案

Naive Ui Admin 是一个基于 Vue3.0、Vite、 Naive UI、TypeScript 的中后台解决方案,它使用了最新的前端技术栈,并提炼了典型的业务模型,页面,包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能,它可以帮助你快速搭建企业级中后台项目,相信不管是从新技术使用还是其他方面,都能帮助到你。

Aug 9, 2022