j-UIEditor

jComponent 20 · jcomponent@20 component

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:

{
	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

<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 componentenCopyright Peter Širka en bijdragen. Mijn licentie.