WYSIWYG - 将工具栏中的小部件拖放到画布中

我试图创建一个基于Web的WYSIWYG编辑器，它由一个画布和一个工具栏组成，例如文本对象，形状对象，线条对象，图像对象，视频对象和照片库对象。一个人可以点击并拖动工具栏中的对象并将其放入画布区域。一旦放置在画布上，它们可以更改对象的属性。他们可以改变的属性是宽度，高度，颜色，Z指数等....WYSIWYG - 将工具栏中的小部件拖放到画布中

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

我主要是一个后端开发人员，所以我对HTML5和CSS3带来的所有新东西的速度并不熟悉，所以不确定它们是否与我需要做的事情相关。

来源

2011-02-11 John

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

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

已经使用的技术包括：

HTML5（<canvas>容易地表示形状和容易放大/缩小）
的JavaScript/jQuery的
PHP（后端脚本保存/加载模板）

引用：http://sketchyoursite.sourceforge.net/（http://sourceforge.net/projects/sketchyoursite/）

编辑：另一种工具可帮助为https://gomockingbird.com/mockingbird/

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

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

来源

2011-02-11 21:39:48 stecb

感谢，通过查看这些工具，我意识到这并不难，也创建了我自己的wysiwyg编辑器。 – John 2011-02-17 19:07:27

检查http://fabric.js 我正在开发使用这种类似直径，真棒支持DRAP降尺度图工具

来源

2012-12-09 05:51:03 vinayrks

我最近碰到Hotglue迷迷糊糊的，它的工作原理一样，但遗憾的是没有画布。我想他们（和我）会很乐意将它从div定位转换到画布，至少在他们的待办事项清单中是一个遥远的发布。

来源

2013-02-02 13:40:02

WYSIWYG - 将工具栏中的小部件拖放到画布中

回答

相关问题