WYSIWYG - Перетащите виджеты с панели инструментов на холст

Question

Я пытаюсь создать веб-редактор WYSIWYG, который состоит из холста и панели инструментов с виджетами, такими как текстовый объект, объект формы, объект линии, объект изображения, объект видео и объект фотогалереи. Человек может щелкнуть и перетащить объекты с панели инструментов и поместить их в область холста. После размещения на холсте они могут изменять свойства объектов. Свойства, которые они могут изменить: ширина, высота, цвет, z-индекс и т. Д.

Кто-нибудь знает, есть ли готовое решение, с которого я могу начать и настроить? Если нет, то о каких библиотеках и технологиях я должен знать, чтобы построить это с нуля?

Я прежде всего бэкэнд-разработчик, поэтому я не в курсе всех новых вещей, которые поставляются с HTML5 и CSS3, поэтому не уверен, имеют ли они отношение к тому, что мне нужно делать.

Answer 1

мы (@work) начали исследовательский проект с Университетом Падуи (Италия - курс разработки программного обеспечения), направленный на получение генератора веб-страниц.Это WYSIWYG , и вы можете Перетаскивать виджеты с панели инструментов на холст :), к сожалению, интерфейс на итальянском, но код очень хороший.

Это проект с открытым исходным кодом, и вы можете посмотреть @ исходный код.

Использовались следующие технологии:

• 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, также это упрощает OO через Class system).
• Серверные сценарии (Php, ruby, java ...) для сохранения (XML, Json..DB?) и загрузки.

Answer 2

чек http://fabric.js Я разрабатываю инструмент для построения диаграмм, используя этот аналог dia, потрясающую поддержку drap-drop-scale

Answer 3

Я недавно наткнулся на Горячий клей , он работает так, но, к сожалению, без холста.Я думаю, что они (и я) были бы очень рады преобразовать его из позиционирования div в canvas, это в их списке задач, по крайней мере, для далекого релиза.