javascript Prezi HTML5 编辑器通过 impress.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9408160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prezi HTML5 Editor via impress.js
提问by auroranil
I recently known that impress.jshas been created as a HTML5 version of Prezi. This helps us to move away from the proprietary Flash technology, and instead use an open web standard that will become universal to all platforms.
我最近知道impress.js已被创建为 Prezi 的 HTML5 版本。这有助于我们摆脱专有的 Flash 技术，转而使用将成为所有平台通用的开放网络标准。
However, it is annoying to type up the code on a HTML text editor (like writing the translation, rotation, and the scale values for the slide). It becomes difficult to visualize the presentation especially when the code is extended to an unbearable length.
然而，在 HTML 文本编辑器上输入代码很烦人（比如为幻灯片编写平移、旋转和缩放值）。可视化演示变得困难，尤其是当代码扩展到无法忍受的长度时。
So here is an example I just created. When reading the HTML code below, it is hard to know exactly where the slides are, and how they will be displayed.
所以这是我刚刚创建的一个例子。在阅读下面的 HTML 代码时，很难知道幻灯片的确切位置以及它们将如何显示。
<div id="impress">
<div class="step" data-x="0" data-y="0">
Slide 1 at origin.
</div>
<div class="step" data-x="100" data-y="100" data-scale="0.5">
Slide 2 has been moved south-eastern side and shrunk by half compared to slide 1.
</div>
<div class="step" data-x="-500" data-y="-405" data-rotate-x="50" data-rotate-y="-34" data-rotate-z="50" data-scale="2.5">
Slide 3 has been rotated in 3D and is 2.5x larger than slide 1.
</div>
</div>
<script type="text/javascript" src="impress.js"></script>
So is there a WYSIWYG HTML5 Prezi editor that I could use? I would want one as it will make it much easier to create presentations based on HTML5, CSS3, and JavaScript.
那么是否有我可以使用的 WYSIWYG HTML5 Prezi 编辑器？我想要一个，因为它可以更轻松地创建基于 HTML5、CSS3 和 JavaScript 的演示文稿。
回答by Matt Crinklaw-Vogt
Hey I recently made Strut. Its a presentation editor just for ImpressJS and is currently in alpha but there is a live demo up here: http://strut.io
嘿，我最近制作了 Strut。它是一个仅用于 ImpressJS 的演示编辑器，目前处于 alpha 阶段，但这里有一个现场演示：http://strut.io
Github repository: https://github.com/tantaman/Strut
Github 存储库：https: //github.com/tantaman/Strut
and here is a youtube vid about it: http://www.youtube.com/watch?v=zA5s8wwme44&feature=share
这是一个关于它的 youtube 视频：http: //www.youtube.com/watch?v=zA5s8wwme44&feature=share
You can add/remove slides, insert images and text boxes, change fonts, save presentations, and modify transitions between slides by moving slides around in the x,y & z directions.
您可以通过在 x、y 和 z 方向上移动幻灯片来添加/删除幻灯片、插入图像和文本框、更改字体、保存演示文稿以及修改幻灯片之间的过渡。
回答by Dan Dascalescu
There are several WYSIWYG editors for Impress.js, discussed on its GitHubissue tracker.
Impress.js 有几个 WYSIWYG 编辑器，在其 GitHub问题跟踪器上进行了讨论。
Strutand Impressionistseem to be the most praised. Strut is very actively developed (last commit: yesterday)
Strut和Impressionist似乎是最受称赞的。Strut 开发非常活跃（最后一次提交：昨天）
Not discussed there is http://www.impressi.me/, which seems abandoned since April 2012. It's also very basic: you can only add text and transitions. No images, can't enter a custom font size.
没有讨论http://www.impressi.me/，它似乎自 2012 年 4 月以来就被放弃了。它也是非常基本的：您只能添加文本和过渡。没有图像，无法输入自定义字体大小。
回答by valkirilov
There is another way to create impress.js presentations and it's completely free - available on www.jspres.com. The module for creating presentations is JavaScript based, but the project contains server side which stores the users presentations and they can access them from every computer.
还有另一种创建 impress.js 演示文稿的方法，它是完全免费的 - 可在 www.jspres.com 上获得。创建演示文稿的模块是基于 JavaScript 的，但该项目包含服务器端，用于存储用户演示文稿，他们可以从每台计算机访问它们。
There are two presentations made with JSpres for an example. The first one is just promo of the project, and the second is the presentation which imagined the project on the National IT olimpics in my country (this is the reason that is not in english, but you have to see the transitions :P)
以 JSpres 做的两个演示为例。第一个只是项目的宣传片，第二个是在我的国家的国家 IT 奥林匹克运动会上想象该项目的演示文稿（这就是不是英文的原因，但你必须看到过渡：P）
http://jspres.com/presentation/present/p:3
http://jspres.com/presentation/present/p:3
http://jspres.com/presentation/present/p:31
http://jspres.com/presentation/present/p:31
So if anyone want to see and try it but have some troubles I wrote a simple guide that will help you to understand the basics and can be found here: http://blog.jspres.com/2013/03/getting-started/
因此，如果有人想查看和尝试但遇到一些麻烦，我写了一个简单的指南，可以帮助您了解基础知识，可以在这里找到：http: //blog.jspres.com/2013/03/getting-started/
So I will put some screens to provoke a little curiosity in you to see the project. I wish you will like it.
所以我会放一些屏幕来激发你看这个项目的好奇心。我希望你会喜欢它。
回答by rene.kapusta
For editing the slides content inline there's a first prototype made with Aloha Editor* available at http://lab.evo42.net/editable-impress.js/-- adding or arranging slides is not possible yet...
为了在线编辑幻灯片内容，可以在http://lab.evo42.net/editable-impress.js/ 上找到第一个使用 Aloha Editor* 制作的原型——添加或排列幻灯片尚不可能......
回答by Willem Mulder
Alternatively, you could use Presenteer.js (http://willemmulder.github.com/Presenteer.js/) which simply moves from one HTML element to the next and centers/zooms it in the viewport. You will not need the data elements, but can work simply with CSS.
或者，您可以使用 Presenteer.js ( http://willemmulder.github.com/Presenteer.js/)，它只是从一个 HTML 元素移动到下一个元素，并在视口中居中/缩放它。您将不需要数据元素，但可以简单地使用 CSS。
回答by naugtur
I have recently published a working impress.js editorprototype where I focused on WYSIWYG positioning of slides in presentation.
我最近发布了一个有效的impress.js 编辑器原型，其中我专注于演示文稿中幻灯片的 WYSIWYG 定位。
You can track progress or report issues on github: https://github.com/naugtur/builder4impress
您可以在 github 上跟踪进度或报告问题：https: //github.com/naugtur/builder4impress
