DummyEditor

DummyEditor is an AngularJS directive to create bootstrap based web pages. It comes with a set of pre-built widgets, that are the most popular bootstrap components. Using drag-n-drop, you can easily move any widgets in the page, in order to find the correct position.

List of available components:

• blockquote
• button
• glyphicons icons
• card
• carousel
• code (pure HTML)
• code-snippet
• container (div, header, footer, main)
• text editor
• font-awesome icons
• form
• grid
• image
• input
• jumbotron
• navbar
• line separator
• spacer
• submit button
• table
• well

Each component uses the standard bootstrap classes, such as btn, btn-primary. If a custom bootstrap theme is used, the new style will be applied! In this way, the generated page will be exactly as you except.

Dependencies

DummyEditor uses the following dependencies:

• angular-translate is used to localize the entire interface;
• ckeditor is used as standard text editor for text contents.

Personalization

If you don't find or if you need a particular widget, it is extremely simple to create your own component. You can find more information here.

Installation

Bower:

bower install dummyeditor

Npm:

npm install dummyeditor

Git clone:

git clone https://github.com/Sprechen/DummyEditor.git

you can find all the necessary files to use the library in the src folder. NOTE: if you plan to create or edit widgets, probably the best option is to clone the source code and use it directly.

Usage

In your HTML page, add the dummy-editor dependencies as follows (using bower):

<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="/bower_components/dummyeditor/src/dummy-editor.js"></script>

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

dummyEditor.setPath('/bower_components/dummyeditor/src');
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']);

NOTE: remember to execute the setPath method to correctly set the path of the DummyEditor source code. This is necessary because DummyEditor dynamically load different files for the widgets and their translations. By default, it assume to be available in the /src folder.

Add the DummyEditor dependency to your AngularJS app:

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

Use the dummy-editor directive as follows:

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

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.

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.

When you want to generate the HTML and CSS code:

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

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 htmlandcss`.

Do you want to contribute?

If you find a bug or a problem, please open a new issue using the standard GitHub issue tracker.

If you are a non-english native speaker, please consider to submit a new localization in your native language!

Finally, if you want to create a new widget, please follow this documentation on how build a new widget.