AngularJS directive to create

HTML bootstrap pages with drag-n-drop!

Try It NOW!

WYSIWYG

With DummyEditor, you can easily create a complete web page using standard bootstrap components.

Easy as editing a Word document, you can move each component across the page, in order to find the best position.

You can add images, texts, tables, icons and even bootstrap grids!

DummyEditor is an AngularJS directive. You can easily integrate it in your web app.

It can be easely integrated in any CMS, and your customer will have the complete control (or only a portion) of any page of her site!

AngularJS

Integration

1. Include the DummyEditor dependencies

DummyEditor dependes on the Angular-Translate plugin to provide localization.

For text editing, it uses the WYSIWYG CKEditor.

<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-translate/angular-translate.min.js"></script>
<script src="/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<script src="/bower_components/ckeditor/ckeditor.js"></script>
<script src="/bower_components/angular-ckeditor/angular-ckeditor.js"></script>
<script src="/src/dummy-editor.js"></script>

2. Initialize the DummyEditor library

Initialize the DummyEditor, choosing the language and the widgets that you want to enable.

dummyEditor.init("en", ['code', 'editor', 'container', 'grid', 'image', 'font-awesome', 'bootstrap-glyphicons', 'bootstrap-button',
        'bootstrap-blockquote', 'form', 'input', 'submit-button', 'separator', 'table', 'spacer', 'carousel', 'well',
        'navbar', 'code-snippet', 'card', 'jumbotron']);

3. Add the DummyEditor dependency to your app

The DummyEditor defines the dummyEditor module. Remember to add it to your dependencies array when you define the AngularJS application.

var app = angular.module('app', ["dummyEditor"]);

4. Use the dummy-editor directive

The dummy-editor directive has 2 parameters, ng-model and css. With ng-model, you can set and retrieve the structured data used by the editor. It is useful to save and load an HTML page. The css argument contains custom CSS definitions, that can be used to modify the theme of the page. These CSS definitions are intended to be used by expert user.

At the moment, the DummyEditor is not (yet!) able to edit plain HTML, but only its structured data. Despite this, the structured data is a standard JavaScript object, that can be serialized and de-serialized to be saved as text in a database.

<dummy-editor custom-css="css" ng-model="model"></dummy-editor>

5. Generate the HTML and CSS code

You can generate the HTML and CSS code of the web page whenever you want, also outside the AngularJS context. You can simply call the method dummyEditor.generateHtml(), which returns a plain JavaScript object with the properties html and css.

var generatedCode = dummyEditor.generateHtml();
console.log(generateCode.html);
console.log(generateCode.css);