j-UIEditor

jComponent 20 · jcomponent@20 component

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:

{
	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

<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. Copyright Peter Širka und Mitwirkende. MIT-Lizenz.