# j-UIEditor

> Öffnen Sie UI Builder und erhalten Sie gespeicherte Designs.

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

Die Komponente öffnet UI Builder in einem Iframe. Binden Sie seinen Pfad an ein Objekt, das das Design und Rückrufe zum Speichern, Veröffentlichen oder Anzeigen einer Vorschau enthält. Setzen Sie den Pfad auf null, um den Editor zu schließen.

Die Komponente öffnet UI Builder im Iframe.

- UI Builder-Editor-Repository <https://github.com/totaljs/uibuilder> (wenn Sie die Cloud-Version nicht verwenden möchten)

__Konfiguration__:

- `url {String}` ein Link zum UI Builder (Standard: `https://uibuilder.totaljs.com`)
- `top {Number}` Standard: `0`
- `left {Number}` Standard: `0`
- `right {Number}` Standard: `0`
- `bottom {Number}` Standard: `0`
- `zindex {Number}` Standard: `30`
- `language {String}` Standard: `eu` (Englisch)
- `onsave {String}` optional, ein Link zu `function(data)`
- `onpublish {String}` optional, ein Link zu `function(data)`
- `onrender {String}` optional, ein Link zu `function(data)`
- `closebutton {Boolean}` Standard: `true`

__Modell__:

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

## Nutzung

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

Quelle: [Total.js Komponenten](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-UIEditor). Copyright Peter Širka und Mitwirkende. [MIT-Lizenz](/knowledge-licenses.json).