Drag & drop html editor

HtmlEditor by Persefone is a drag & drop html editor script in javascript Jquery and php built for developer. You can simply integrate this script in your web project and create custom html template with drag & drop.

Which kind of block can you add and edit?

Server requirements

It's necessary a web server that support php (for example Apache). It can be Windows or linux server. There aren't special libraries to load, just a server with php support to save html result.

Installation

Upload with FTP software the files and folders in your website and set chmod 777 to "tmp" folder.

Where are stored the templates and previews saved?

In "tmp" folder.

Can i re-edit the templates stored??

It's possible. You can load (or copy/paste) html code in the following div

                        <div class="htmlpage">
                        …
                        </div>

located in index.php file.

Can I add custom html block types?

A html block is so structured:


                                <div class="box box-element" data-type="paragraph">
                                    <a href="#close" class="remove btn btn-danger btn-xs"><i class="glyphicon glyphicon-remove"></i></a>
                                    <a class="drag btn btn-default btn-xs"><i class="glyphicon glyphicon-move"></i></a>
                                    <span class="configuration">
                                        <a class="btn btn-xs btn-warning settings"  href="#" ><i class="fa fa-gear"></i></a>
                                    </span>

                                    <div class="preview">
                                        <i class="fa fa-font fa-2x"></i>
                                        <div class="element-desc">Paragraph</div>
                                    </div>
                                    <div class="view">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    </div>
                                </div>

Where

                                    <div class="preview">
                                        <i class="fa fa-font fa-2x"></i>
                                        <div class="element-desc">Paragraph</div>
                                    </div>

has the icon and the following text

                        <div class="view">

                        </div>

contains the html block that will be put into the body of the email.

Which Javascript libraries does the script use?

js/jquery.min.js
jquery-ui.min.js
jquery.ui.touch-punch.min.js
bootstrap.min.js
tinymce/tinymce.min.js

app.js contains the javascript code to operate the editor.

Which browsers are compatible with this editor?

Chrome, Safari, Firefox, Opera e Internet Explorer

Html editor