Search code examples
javascriptwysiwyg

WYSIWYG - Drag and drop widgets from toolbar into canvas

I'm trying to create a web-based WYSIWYG editor that consists of a canvas and a tool bar with widgets such as text object, shape object, line object, image object, video object and photo gallery object. A person can click and drag objects from the tool bar and place them into the canvas area. Once placed in canvas, they can change the properties of the objects. Properties they can change are width, height, color, z-index etc....

Does anyone know if there's an off the shelf solution I can start from and customize? If not, then what libraries and technologies should I be aware of to build this from scratch?

I'm primarily a backend developer, so I'm not up to speed with all the new things that come with HTML5 and CSS3, so not sure if they are relevant to what I need to do.

Solution

  • we (@work) have started a research project with University of Padua (italy - course of Software Engineering) aimed to obtain a web page generator. It's a WYSIWYG and you can Drag and drop widgets from toolbar into canvas :) unfortunately, the UI is in Italian but the code is very good.

    It's an open source project and you can take a look @ the source.

    The technologies that have been used are:

    • HTML5 (<canvas> to easily represent shapes and easily zoom-in/out)
    • javascript/jQuery
    • Php (backend script to save/load templates)

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

    Edit: another tool that could be helpful is https://gomockingbird.com/mockingbird/

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

    • HTML+css obv for the basic layout (widget toolbar, canvas area...)
    • Tons of JS to represent each different object. I.e. you could map a particular widget with a pure JS object that could have some properties. These props are rendered when you click the object inside the canvas area. When you want to drag an object inside the area, resize it etc you should use a js lib (personally, I prefer mootools, also coz it simplifies OO through the Class system).
    • Server side scripts (Php, ruby, java...) to save (XML, Json..DB?) and load.