All geek questions in one place

WYSIWYG - dragging a widget from a toolbar onto a canvas

I am trying to create a WYSIWYG web editor consisting of a canvas and a toolbar with widgets such as a text object, form object, line object, image object, video object and photo gallery object. A person can click and drag objects from the toolbar and place them in the canvas area. When they are placed on the canvas, they can change the properties of objects. Properties that they can change: width, height, color, z-index, etc.

Does anyone know if there is a solution from the shelf from which I can start and configure? If not, what libraries and technologies should I know in order to build it from scratch?

First of all, I am a backend developer, so I am not aware of all the new things that appear with HTML5 and CSS3, so I'm not sure that they are related to what I need to do.

+4
source share
3 answers

we (@work) started a research project with the University of Padua (Italian course in software engineering), whose goal was to get a web page generator. This is WYSIWYG, and you can drag and drop widgets from the toolbar onto the canvas :) Unfortunately, the user interface is in Italian, but the code is very good.

This is an open source project and you can take a look @ source.

Technologies used:

  • HTML5 ( <canvas> to easily represent shapes and easily zoom in / out)
  • Javascript / jquery
  • Php (backend script for saving / loading templates)

links: http://sketchyoursite.sourceforge.net/ (http://sourceforge.net/projects/sketchyoursite/)

Edit: another tool that might be useful https://gomockingbird.com/mockingbird/

About starting from scratch, I suggest you use the following architecture / technology:

  • HTML + css obv for the main layout (widget toolbar, canvas area ...)
  • Tons of JS to represent every other object. That is, you can map a specific widget to a pure JS object, which may have some properties. These details are displayed when you click an object inside the canvas area. If you want to drag an object inside an area, change its size, etc., you should use js lib (I personally prefer mootools , also coz it simplifies OO through the Class system).
  • Server side scripts (Php, ruby, java ...) for saving (XML, Json..DB?) And loading.
+3
source

check out http: //fabric.js I am developing a chart tool using this function similar to dia, huge draft support

+2
source

I recently came across Hotglue , it works like that, but unfortunately without a canvas. I assume that they (and I) would be very happy to turn it from div positioning to canvas, at least it is on the task list for the distant release.

0
source

Source: https://habr.com/ru/post/1339412/

More articles:


All Articles