UiEditor

UIEditor is a wisiwyg html editor implemented with AngularJS 2.x. The available components - as seen in the palette to the left - can be dragged onto the main area - or alternatively the component tree - and will be instanciated as children of the corresponding parent element. A property editor onn the right side is used to modify corresponding properties. These are either normal html properties or properties which make sense in an Angular environment - e.g. 'click'. Layout elements - such as rows and columns are based on bootstrap 3.x.

Basic Idea

The basic idea is a rendering engine, that knows about different types of components as organized in a central component registry. Every component is defined by

• a number of properties ( with corresponding type information ), and
• a template string containing static content as well as placeholders that will be filled by dynamic data.

The payload data on the other hand is a simple javascript object referencing the component type and specific property values. A special property - '$children' references any component children.

Let's look at a simplified example:

The component 'label' as registered with a registry:

  componentRegistry.register(template("label")
                // the template
                .renderTemplate("<label>$value$</label>")
                // property editors will use this information
                .setLabel("Label")
                .group('Widgets')
                // essential for drag & drop
                .validParents('col', 'div', 'form', 'fieldset')
                // properties
                .register(property("value")
                    .tooltip("the label content") // used by the property editor
                    .setDefault("") // if the payload does not cotain a value this default ill be used instead

will be able to render the following payload data.

{
   "$isa": "label", // the component reference
   "value": "Hello World" // a property
}

and will produce:

<label>Hello World</label>

A running demo can be found here.

Features

• Support for shortcuts ( ctrl+z, del )
• Undo mechanism ( try ctrl+z )
• Inplace edit for most string based widgets ( e.g. label, h1 )
• Generic component registry with support for
  • custom property renders
  • custom property editors
  • properties that reference either plain values or angular bindings

Missing

The project is far away from being complete. Missing features are at least

• a backend :-)
• better property editors: font editor, color picker, box editor...
• compound components
• i18n support for both editor as well as the rendering engine
• support for business datatypes ( e.g. string 10 )
• more components ( images, etc. )

Internal classes

If you are just interested in the provided widgets, just go ahead.

• Tree
• Splitter
• Floating windows
• Tabs
• In-Place editors
• Context Menus
• Drag & Drop
• Breadcrumb

Project Setup

This project was generated with angular-cli version 1.0.0-beta.28.3.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class/module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Deploying to GitHub Pages

Run ng github-pages:deploy to deploy to GitHub Pages.

Further help

To get more help on the angular-cli use ng help or go check out the Angular-CLI README.