WYSIWYG - 将小部件从工具栏拖放到画布中答案

【问题标题】：WYSIWYG - Drag and drop widgets from toolbar into canvasWYSIWYG - 将小部件从工具栏拖放到画布中
【发布时间】：2011-06-25 20:19:04
【问题描述】：

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

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

我主要是一名后端开发人员，所以我跟不上 HTML5 和 CSS3 带来的所有新事物，所以不确定它们是否与我需要做的事情相关。

【问题讨论】：

标签： javascript wysiwyg

【解决方案1】：

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

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

已经使用的技术有：

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

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

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

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

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

【讨论】：

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

【解决方案2】：

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

【讨论】：

【解决方案3】：

我最近偶然发现了Hotglue，它就是这样工作的，但不幸的是没有画布。我猜他们（和我）会很乐意将它从 div 定位转换为画布，它在他们的待办事项列表中，至少可以在很远的地方发布。

【讨论】：