WYSIWYG - 从工具栏中拖拽部件到画布中

Question

我正在尝试创建一个基于Web的所见即所得编辑器，其中包括画布和工具栏，以及文本对象、形状对象、线条对象、图像对象、视频对象和照片库对象等小部件。用户可以从工具栏中点击并拖动对象到画布区域。一旦放置在画布上，他们可以更改对象的属性。他们可以更改的属性包括宽度、高度、颜色、z-index等。

有没有现成的解决方案可以供我开始定制？如果没有，那么我应该了解哪些库和技术才能从头开始构建？

我主要是后端开发人员，所以不太了解HTML5和CSS3带来的所有新功能，因此不确定它们是否与我需要做的内容相关。

- John

Answer 1

我们(@work)与意大利帕多瓦大学（软件工程课程）开始了一个研究项目，旨在获得一个网页生成器。它是所见即所得的(WYSIWYG)，您可以从工具栏中将小部件拖放到画布中 :) 不幸的是，用户界面是用意大利语编写的，但代码非常好。

这是一个开源项目，您可以查看源代码。

已经使用的技术包括：

- HTML5 (用于轻松表示形状并轻松缩放) - javascript/jQuery - Php (后端脚本用于保存/加载模板)

参考文献：http://sketchyoursite.sourceforge.net/(http://sourceforge.net/projects/sketchyoursite/)

编辑：另一个有用的工具是https://gomockingbird.com/mockingbird/ 关于从头开始，我建议您使用以下架构/技术：

- 当然需要HTML+CSS作为基本布局(小部件工具栏、画布区域...) - 大量JS代表每个不同的对象。例如，您可以将特定小部件映射到JS对象，该对象可能具有一些属性。单击画布区域内的对象时，将呈现这些属性。当您想要在该区域内拖动对象、调整大小等时，您应该使用一个js库(个人来说，我更喜欢mootools，因为它通过Class系统简化了OO)。 - 服务器端脚本(PHP、Ruby、Java...)用于保存(XML、Json..DB?)和加载。

- stecb

---

通过查看这些工具，我意识到创建自己的所见即所得编辑器并不难。谢谢。 - John

Answer 2

请查看http://fabric.js，我正在使用它来开发一个类似于Dia的图表工具，它支持拖放和缩放，并提供出色的支持。

- vinayrks

Answer 3

最近我偶然发现了Hotglue，它的工作方式类似于这样，但不幸的是没有canvas。我猜他们（和我）会非常高兴将其从div定位转换为canvas，在他们的待办事项清单中至少有一个遥远的发布计划。

- Rafael Brix