# j-UIEditor

> Open UI Builder en ontvang beveiligde ontwerpen.

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

De component opent UI Builder in een iframe.Bind de route aan een object met het ontwerp en callbacks om te besparen, te publiceren of te voorzien.Sit de route naar nul om de editor te sluiten.

De component opent UI Builder in de iframe.

- UI Builder editor repository <https://github.com/totaljs/uibuilder> (als u de cloudversie niet wilt gebruiken)

__Configuratie__:

- `url {String}` een link naar de UI Builder (default: `https://uibuilder.totaljs.com`)
- `top {Number}` De default: `0`
- `left {Number}` De default: `0`
- `right {Number}` De default: `0`
- `bottom {Number}` De default: `0`
- `zindex {Number}` De default: `30`
- De standaard `language {String}`: `eu`
- `onsave {String}` optioneel, een link naar `function(data)`
- `onpublish {String}` optioneel, een link naar `function(data)`
- `onrender {String}` optioneel, een link naar `function(data)`
- `closebutton {Boolean}` De default: `true`

__Modellen__:

```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
}
```

## Gebruik

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

De bron: [Total.js componenten](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-UIEditor)Copyright Peter Širka en bijdragen. [Mijn licentie](/knowledge-licenses.json).