# j-UIEditor

> Open UI Builder and receive saved designs.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: c5382071ed0d83170e1897275e901dcc5989c57e5da4ddf341fb1deb6110470d
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

The component opens UI Builder in an iframe. Bind its path to an object containing the design and callbacks for saving, publishing or previewing it. Set the path to null to close the editor.

The component opens UI Builder in the iframe.

- UI Builder editor repository <https://github.com/totaljs/uibuilder> (if you don't want to use cloud version)

__Configuration__:

- `url {String}` a link to the UI Builder (default: `https://uibuilder.totaljs.com`)
- `top {Number}` default: `0`
- `left {Number}` default: `0`
- `right {Number}` default: `0`
- `bottom {Number}` default: `0`
- `zindex {Number}` default: `30`
- `language {String}` default: `eu` (english)
- `onsave {String}` optional, a link to `function(data)`
- `onpublish {String}` optional, a link to `function(data)`
- `onrender {String}` optional, a link to `function(data)`
- `closebutton {Boolean}` default: `true`

__Model__:

```js
{
	data: { .. UI BUILDER DESIGN .. },
	upload: 'https://.../upload/', // optional
	groups: [{ id: 'group1', name: 'Group 1' }], // optional
	apps: [{ id: 'app1', name: 'App 1' }], // optional
	views: [{ id: 'view1', name: 'View 1' }], // optional
	close: function() {}, // optional, it's executed when the editor is closed
	save: function(data) {}, // optional, it's executed when the user saves design
	publish: function(data) {}, // optional, it's executed when the user compiles design
	render: function(data) {}, // optional, it's executed when the user wants to preview a design
}
```

## Usage

```html
<ui-component name="uieditor" path="editor.current"></ui-component>
<script>
  function openDesign(design) {
    SET('editor.current', {
      data: design,
      save: function(updatedDesign) {
        SET('form.design', updatedDesign);
      }
    });
  }
</script>
```

Source: [Total.js components](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-UIEditor). Copyright Peter Širka and contributors. [MIT license](/knowledge-licenses.json).