jQuery: create a drag and drop HTML editor for online PDF editing

jQuery: create a drag and drop HTML editor for online PDF editing

A simple drag and drop HTML editor to be used to create PDF previews by using jQuery and jQuery UI.

I've just finished a project which hinges on the dynamic creation of PDF templates online. What I had to do was simply creating an editor with jQuery. I did want to add a drag and drop functionality to the editor in order to allow users to select their images and insert theme into the HTML templates provided by the editor. This feature is entirely managed by jQuery UI.

In order to generate a PDF preview with a PHP library we only need to build a well-formed HTML string to be passed to the server-side script via AJAX. You can use mPDF, domPDF or simply just another PHP library that is able to parse HTML strings and recognize CSS styles.

The toHTML() method of the LayoutHandler object runs a loop through the selected HTML template structure and creates a new HTML structure which is based on tables. I decided to use HTML tables because they can be easily managed by our PHP library. Bear in mind that such libraries do not have advanced CSS features (they're not browsers!) so you may encounter problems if you try to use the same approach used with web documents.

The basic implementation and all the relevant code is shown in the page below. Simply attach an AJAX action to the html button instead of simply displaying the newly created markup.

[view-example url="http://jsfiddle.net/gabrieleromanato/GtqBR/"]