我正在尝试创建一个基于 Web 的 WYSIWYG 编辑器,它由一个 Canvas 和一个带有小部件的工具栏组成,例如文本对象、形状对象、线条对象、图像对象、视频对象和照片库对象。人们可以从工具栏中单击并拖动对象并将它们放入 Canvas 区域。一旦放置在 Canvas 中,他们就可以更改对象的属性。他们可以更改的属性有宽度、高度、颜色、z-index 等......
有谁知道是否有现成的解决方案可供我使用和自定义?如果不是,那么我应该了解哪些库和技术才能从头开始构建它?
我主要是一名后端开发人员,所以我没有跟上 HTML5 和 CSS3 带来的所有新事物的速度,所以不确定它们是否与我需要做的事情相关。
最佳答案
我们 (@work) 与帕多瓦大学(意大利 - 软件工程类(class))启动了一项研究项目,旨在获得网页生成器。这是一个所见即所得,您可以将小部件从工具栏拖放到 Canvas 中 :) 不幸的是,UI 是意大利语,但代码非常好。
这是一个开源项目,你可以看看@source。
使用过的技术有:
- HTML5(
<canvas>
可轻松表示形状并轻松放大/缩小) - javascript/jQuery
- PHP(用于保存/加载模板的后端脚本)
引用文献:http://sketchyoursite.sourceforge.net/ (http://sourceforge.net/projects/sketchyoursite/)
编辑:另一个可能有用的工具是 https://gomockingbird.com/mockingbird/
关于从头开始,我建议你使用以下架构/技术:
关于javascript - 所见即所得 - 将小部件从工具栏拖放到 Canvas 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4974262/