WYSIWYG - 将小工具从工具栏拖放到画布中

Question

我正在尝试创建一个基于Web的WYSIWYG编辑器，该编辑器包含一个画布和一个带有小部件的工具栏，例如文本对象，形状对象，线对象，图像对象，视频对象和照片库对象。一个人可以从工具栏中单击并拖动对象并将它们放入画布区域。放置在画布中后，它们可以更改对象的属性。他们可以改变的属性是宽度，高度，颜色，z指数等....

有谁知道我是否可以从一个现成的解决方案开始并自定义？如果没有，那么我应该从头开始构建这些库和技术？

我主要是后端开发人员，因此我无法快速掌握HTML5和CSS3附带的所有新功能，因此不确定它们是否与我需要做的相关。

Answer 1

我们（@work）已经与帕多瓦大学（意大利 - 软件工程课程）开展了一项旨在获得网页生成器的研究项目。这是一个 WYSIWYG ，您可以将小工具从工具栏拖放到画布 :)，不幸的是，UI是意大利语，但代码非常好。

这是一个开源项目，你可以看看@源。

使用的技术是：

• HTML5（<canvas>可轻松表示形状并轻松放大/缩小）
• 的JavaScript / jQuery的
• Php（保存/加载模板的后端脚本）

参考：http://sketchyoursite.sourceforge.net/（http://sourceforge.net/projects/sketchyoursite/）

编辑：另一个可能有用的工具是https://gomockingbird.com/mockingbird/

关于从头开始，我建议您使用以下架构/技术：

• HTML + css obv用于基本布局（小工具栏，画布区域......）
• 代表每个不同对象的JS。即您可以使用可能具有某些属性的纯JS对象映射特定小部件。单击画布区域内的对象时，将呈现这些道具。如果你想在区域内拖动一个对象，调整大小等等，你应该使用js lib（个人而言，我更喜欢mootools，也可以通过Class系统简化OO。）
• 要保存（XML，Json..DB？）和加载的服务器端脚本（Php，ruby，java ...）。

Answer 2

检查http://fabric.js 我正在开发一个图表工具，使用类似于dia，awesome支持drap-drop-scale

Answer 3

我最近偶然发现Hotglue，它的工作方式与此类似，但遗憾的是没有画布。我猜他们（和我）非常乐意将它从div定位转换为canvas，它至少在远程版本的todo列表中。