Online Powerpoint（基于HTML5的在线幻灯片应用）.zip

# 在线幻灯片 > 演示界面：https://ppt.petterobam.cn 近期 TODO： - [X] :art: 支持 Markdown 文件格式导入 - [X] :art: 支持导出幻灯片为 Markdown 文件 - [X] :bug: 由于使用 Knockout 导致 MathJax 无法及时渲染，需要解决 - [ ] :art: 需要做一个单文件模板用于内部应用直接拥有幻灯片功能（类似于插件） ## 简介 > Online Powerpoint，在线幻灯片。 > > 实现参照：https://github.com/Jinjiang/h5slides > > 升级细节： > 界面设计：仿造熟悉的微软 PPT 软件 Powerpoint > 实现的功能主要有添加实现大纲略缩菜单功能，增加 HTML5 的非 Js 富文本编辑框，增加自定义主题功能，实现离线文件导入导出等功能。 > > PS: 火狐兼容性最好，某些浏览器插件会阻断页面js，如 SuperCopy 等，建议禁用插件。 部分截图：  幻灯片编辑页面全览设计草图  幻灯片编辑界面实现效果图 -------------------------------------------------------------- ## 摘 要 进入新世纪以来，信息技术产业迅猛发展，已经逐渐深入到了日常生活的方方面面。通过幻灯片这类的演示文稿软件，能更好、更直观的表达出演讲者所要表达的主题和主要内容，使演讲者有了它在演讲的时候能实现更有秩序和更完美的演讲，提高沟通交流的效率。目前，不论是在科学教育、商业展示、产品说明、比赛演讲等各个方面，都是依赖幻灯片类软件，以实现有效的表达。 HTML5 作为 Web 时代的新星，拥有更高的可用性和更好的体验效果，并且对 HTML 标签和一些属性进行了良好的扩展，使得前端拥有更加丰富的功能。特别是在多媒体方面，HTML5 给出了更简便稳定的实现方案，可以很好的代替 FLASH 和 Silverlight。HTML5 被设计出来，致力于打造一个无缝的网络环境，不管是在 PC 端，还是移动端，都能完美兼容，使得基于它的应用能够有较好的移植性。 基于 HTML5 的在线幻灯片系统，利用 Sublime Text 编辑器和 Fierfox Developer Edition 工具，实现了在线幻灯片系统的编辑模块、保存模块和播放模块。它拥有简洁清爽的界面，自然流畅的体验和全面实用的功能，利用 RequireJS 实现面向模块的架构，有良好的兼容性和扩展性。基于 HTML5 的在线幻灯片系统，仅仅通过浏览器实现幻灯片的编辑、保存、演示，让你摆脱用 U 盘携带存储和系统软件环境的限制。 关键词： HTML5； Sublime Text； RequireJS； 在线幻灯片 ## 目 录 |目 录|目 录| |:--|:--| |<a href="#1--绪论">1 绪论 </a>|<a href="#43--系统数据设计">4.3 系统数据设计 </a>| |<a href="#11--项目研究背景">1.1 项目研究背景 </a>|<a href="#431--主题和动作数据">4.3.1 主题和动作数据 </a>| |<a href="#12--项目研究意义">1.2 项目研究意义 </a>|<a href="#432--幻灯片数据">4.3.2 幻灯片数据 </a>| |<a href="#13--论文的组织结构">1.3 论文的组织结构 </a>|<a href="#433--导出离线 html 文件 ：文本模板数据">4.3.3 导出离线 html 文件 ：文本模板数据 </a>| |<a href="#2--开发技术">2 开发技术 </a>|<a href="#434--用户在线数据">4.3.4 用户在线数据 </a>| |<a href="#21--开发工具">2.1 开发工具 </a>|<a href="#44--本章小结">4.4 本章小结 </a>| |<a href="#22--关键技术">2.2 关键技术 </a>|<a href="#45--系统实现">5 系统实现 </a>| |<a href="#221--Bootstrap">2.2.1 Bootstrap </a>|<a href="#51--系统界面">5.1 系统界面 </a>| |<a href="#222--KnockoutJS">2.2.2 KnockoutJS </a>|<a href="#52--数据层封装">5.2 数据层封装 </a>| |<a href="#223--RequireJS">2.2.3 RequireJS </a>|<a href="#53--大纲区实现">5.3 大纲区实现 </a>| |<a href="#23--本章小结">2.3 本章小结 </a>|<a href="#54--鼠标事件和键盘事件">5.4 鼠标事件和键盘事件 </a>| |<a href="#3--需求分析">3 需求分析 </a>|<a href="#55--富文本编辑器">5.5 富文本编辑器 </a>| |<a href="#31--功能分析">3.1 功能分析 </a>|<a href="#56--导出功能">5.6 导出功能 </a>| |<a href="#32--性能分析">3.2 性能分析 </a>|<a href="#57--系统特色功能">5.7 系统特色功能 </a>| |<a href="#33--系统可行性分析">3.3 系统可行性分析 </a>|<a href="#571--代码编辑框">5.7.1 代码编辑框 </a>| |<a href="#34--数据存储分析">3.4 数据存储分析 </a>|<a href="#572--简易取色器">5.7.2 简易取色器 </a>| |<a href="#35--运行环境">3.5 运行环境 </a>|<a href="#573--制作花样主题">5.7.3 制作花样主题 </a>| |<a href="#36--本章小结">3.6 本章小结 </a>|<a href="#574--动作动态预览区">5.7.4 动作动态预览区 </a>| |<a href="#4--系统分析与设计">4 系统分析与设计 </a>|<a href="#58--界面兼容性调试">5.8 界面兼容性调试 </a>| |<a href="#41--系统结构设计">4.1 系统结构设计 </a>|<a href="#59--项目发布">5.9 项目发布 </a>| |<a href="#411--系统界面结构">4. 系统界面结构 1.1 </a>|<a href="#510--本章小结">5.10 本章小结 </a>| |<a href="#412--系统功能结构">4.1.2 系统功能结构 </a>|<a href="#6--总结与展望">6 总结与展望 </a>| |<a href="#413--系统调试设计">4.1.3 系统调试设计 </a>|<a href="#61--总结完成的工作">6.1 总结完成的工作 </a>| |<a href="#42--系统组成模块">4.2 系统组成模块 </a>|<a href="#62--展望">6.2 展望 </a>| ## 1 绪论 ### 1.1 项目研究背景 1. HTML5 2014 年 10 月 29 日，万维网联盟泪流满面地宣布，经过几乎 8 年的艰辛努力，HTML5 标准规范终于最终制定完成了，并已公开发布。[8] 在此之前的几年时间里，已经有很多开发者陆续使用了 HTML5 的部分技术，Firefox、Google Chrome、Opera、Safari 4+、Internet Explorer 9+都已支持 HTML5。[8] HTML5 将会取代 1999 年制定的 HTML 4.01、XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。[8] W3C CEO Jeff Jaffe 博士表示：“HTML5 将推动 Web 进入新的时代。不久以前，Web 还只是上网看一些基础文档，而如今，Web 是一个极大丰富的平台。我们已经进入一个稳定阶段，每个人都可以按照标准行事，并且可用于所有浏览器。如果我们不能携起手来，就不会有统一的 Web。” [8] HTML5 还有望成为梦想中的“开放 Web 平台”(Open Web Platform) 的基石，如能实现可进一步推动更深入的跨平台 Web 应用。[8] HTML5 赋予网页更好的意义和结构。更加丰富的标签将随着对 RDFa 的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的 Web。 基于 HTML5 开发的网页 APP 拥有更短的启动时间，更快的联网速度，这些全得益于 HTML5 APP Cache，以及本地存储功能。Indexed DB（html5 本地存储最重要的技术之一）和 API 说明文档。[8] HTML5 将会最终代替多媒体框架，如 Flash，但是短期看来还不是时候，因为将现有应用 Flash 的网络开发完全转向 HTML5 还需要一段时间。尽管 HTML5 提出了许多优点，但是还可能有某些应用更适合于更灵活的框架。一些主流的大公司都逐步转向使用 HTML5，谷歌于 2015 年 2 月 26 日开始自动将 Flash 广告转换为 HTML5 格式，这可能会加速 HTML5 替代 Flash 的进程，但是这个转变的过程也不是一蹴而就的。[8] 它承诺带来一个无缝的网络。HTML5 会带来一个统一的网络，无论是笔记本，台式机，还是智能手机都应该很方便的浏览基于 HTML5 的网站。因此在设计网站的时候，开发者需要重�