Drag and Drop Editor - HTML 5

Stängt Publicerat Dec 28, 2015 Betalades vid leverans
Stängt Betalades vid leverans

We are after a HTML5 Drag and Drop editor using JavaScript and JQuery. The editor will be used for 'Email Campaigns'. The CSS framework used should be Bootstrap, latest version.

The editor must be able to handle different 'starting' layouts, i.e. a blank canvas or as 'theme' such as a two column layout with a banner across the top. If a 'theme' is selected to being with, each of the theme components or 'blocks' must be editable as if they were dragged on to the blank canvas by the user. The editor must be extendible re the 'blocks' that can be 'dragged and dropped' onto the editor.

At a minimum the editor must have the following 'block types':

- Title (headers)

- Text - Buttons/Links

- Divider (horizontal rules or simply empty an empty blocks to space out elements)

- Images

- Images with text wrapping

- Social links (Facebook, Twitter, LinkedIn, etc)

- Social 'follow' links

- Video blocks (Youtube section embedded in content)

- Footer Each 'type' should be expendable so that multiple different 'versions' of a type exist. I.e. A 'footer' element could come in two or three different varieties or styles.

Additionally it must be possible to duplicate each block, which simply inserts a carbon copy directly blow. Each block should be movable up and down the page and also removable. With the 'images' they should be linkable to either a url or you should be able to drag an image from your e.g. desktop or a folder directly into the editor.

Everything in the editor must be editable including

- All text and images (and other blocks where applicable) (including its size, font type, line height, colour, bold, italtics, alignment, links, number of columns for text, width of columns, etc)

- Background (either as a colour or image)

- Padding and margins (top and bottom specifically) for each item.

- Borders (including size, colour, etc)

- Image sizes, including the ability to crop and rotate. - The image alt text.

- The editor must have the ability to 'remove all styles' from a given set of text - The location of 'text' surround an 'image'. I.e. ability to wrap text around the image with the image left aligned or right aligned, the ability to place the text below the image etc.

- The 'width' of the item, i.e. so that two block can be placed next to each other.

- Ability to turn off or on the social networks name in the block.

- Ability to determine the social icon sizes or icon styles.

Further the editor must have the ability to specifically change e.g. font size and line height etc for 'mobile devices'. The editor must have a 'preview function' so that the content can be previewed on a desktop browser and also in a simulate mobile and tablet device. I.e. a smaller screen. The editor should also have a function to 'validate all links'. This should check their format and list all links down the side for the user to click on them and open them in a new tab to 'test them'.

Write editor so I know you read the complete description.

Example links from the www. [url removed, login to view] [url removed, login to view] [url removed, login to view]

PS:- THIS IS ALMOST COMPLETED JUST A FEW THINGS LEFT BUT OUR LAST DEVELOPER JUST DISAPPEARED SO NEED A NEW PERSON TO COMPLETE THIS...... YOU CAN CHECK THE CURRENT STATUS AT [url removed, login to view]

CSS HTML5 JavaScript jQuery/Prototype

Projekt-id: #9205712

About the project

6 offerter Distansprojekt Aktivt Feb 14, 2016