1 Star 0 Fork 0

冰原狼 / pptest

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
Apache-2.0

🎨 PPTist

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

在线体验地址:https://pipipi-pikachu.github.io/PPTist/

如果网络状态不佳,可以访问国内镜像(非实时更新):https://pptist.gitee.io/

🚀 项目运行

npm install

npm run serve

📚 功能列表

通用功能

  • 历史记录(撤销、重做)
  • 快捷键
  • 右键菜单

幻灯片页面编辑

  • 页面添加、删除
  • 页面顺序调整
  • 页面复制粘贴
  • 背景设置(纯色、渐变、图片)
  • 网格线
  • 画布缩放
  • 主题设置
  • 幻灯片备注
  • 幻灯片模板

幻灯片元素编辑

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

文字

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

图片

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

形状

  • 填充色
  • 边框
  • 阴影
  • 透明度
  • 翻转
  • 编辑文字

线条

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

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

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

表格

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

视频

  • 预览封面设置

公式

  • LaTeX编辑
  • 颜色设置
  • 公式线条粗细设置

幻灯片放映

  • 翻页动画
  • 元素入场动画
  • 全部幻灯片预览
  • 画笔、黑板工具
  • 自动放映

💡 常见问题

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

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

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

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

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

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

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

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

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

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

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

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

Q. 设置在线字体不生效?

A. 设置在线字体时会下载对应的字体文件,该文件较大,需要等待下载完成后才会应用新的字体。

Q. 关于导入导出PPTX文件

A. 作为一个在线幻灯片应用,导出、导入PPTX文件是非常重要的功能,但是经过调研发现,该功能实现起来的复杂度远超过了预期。由于个人能力和时间有限,这部分功能只能借助第三方的轮子来完成。

目前导出功能主要基于 PptxGenJS 完成,能够实现大多数基本元素的导出,但还有非常多的缺陷需要一点点完善。同时需要知晓的是:1、该功能依赖 PptxGenJS,对于该库本身无法实现的部分,我也无能为力;2、导出功能的目标只是【导出样式尽可能一致的元素】,而不是一比一将网页还原到PPT,一些样式差异是必然存在的。

导入功能目前暂时没有合适的解决方案,还在调研和观望中。

如果有感兴趣或做过相关内容的朋友,欢迎在 issues 中讨论。

Q. 视频元素支持哪些格式?

A. 本项目只提供最基础的视频能力,正常状态下可以播放video标签本身支持的格式。

此外,可以额外引入 hls.jsflv.js 来支持对应的格式(.m3u8 .flv),你只需要在项目中引入对应的文件(如cdn)即可,无需其他配置。

📁 项目目录结构

├── assets                        // 静态资源
│   ├── fonts                     // 在线字体文件
│   └── styles                    // 样式
│       ├── antd.scss             // antd默认样式覆盖
│       ├── font.scss             // 在线字体定义
│       ├── global.scss           // 通用全局样式
│       ├── mixin.scss            // scss全局混入
│       ├── variable.scss         // scss全局变量
│       └── prosemirror.scss      // ProseMirror 富文本默认样式
├── components                    // 与业务逻辑无关的通用组件
├── configs                       // 配置文件,如:画布尺寸、字体、动画配置、快捷键配置、预置形状、预置线条等数据。
├── hooks                         // 供多个组件(模块)使用的 hooks 方法
├── mocks                         // mocks 数据
├── plugins                       // 自定义的 Vue 插件
├── types                         // 类型定义文件
├── store                         // Vuex store,参考:https://vuex.vuejs.org/zh/guide/
├── utils                         // 通用的工具方法
└── views                         // 业务组件目录,分为 `编辑器` 和 `播放器` 两个部分。
    ├── components                // 公用的业务组件
    ├── Editor                    // 编辑器模块
    └── Screen                    // 播放器模块

💿 数据

幻灯片的数据主要由 slidestheme 两部分组成。

换句话说,在实际的生产环境中,一般只需要存储这两项数据即可。

  • slides 表示幻灯片页面数据,包括每一页的ID、元素内容、备注、背景、动画、切页方式等信息
  • theme 表示幻灯片主题数据,包括背景色、主题色、字体颜色、字体等信息

具体类型的定义可见:https://github.com/pipipi-pikachu/PPTist/blob/master/src/types/slides.ts

💻 贡献代码

首先感谢每一位关注本项目的朋友,非常欢迎每一位对本项目感兴趣的朋友贡献代码。

具体参考如下:

  • fork 源码,下载到本地并运行项目
  • 修改代码并进行自我测试后提交修改到 github
  • 提交 Pull Request

另外需要注意的是:

  • 每一次 Pull Request 都不应该提交过多的代码,且务必说明本次改动的具体目的,例如:修复了某个 bug、优化了某个方法 等,方便进行 Code Review;
  • 对于 bug 的修复,应该将本次 Pull Request 和相对应 bug 的 issue 关联起来,让别人知道该问题已经被修复;
  • 对于较大的新功能,你需要先提交 Issues,例如 ‘添加 XXX 功能’,确认该功能有被添加的必要后,再开始工作;
  • 对于一些主观的样式、交互逻辑调整:如颜色、图标的使用,某些预设配置的增减修改等,一般不予通过。但可以在 Issues 中进行讨论;
  • 其他如简单的代码优化、文档修正等,只要修改合理都会被接受。

在此,感谢每一位贡献者。

📄 开源协议

Apache-2.0 License

💣 友情提示

本项目不接受任何形式的私人咨询,有任何问题 欢迎在 github 提交你的 Issues

Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright (c) 2021 pipipi-pikachu Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

简介

暂无描述 展开 收起
JavaScript 等 5 种语言
Apache-2.0
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/kankanol/pptest.git
git@gitee.com:kankanol/pptest.git
kankanol
pptest
pptest
main

搜索帮助