j-UIEditor

jComponent 20 · jcomponent@20 component

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:

{
	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

<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. Copyright Peter Širka and contributors. MIT license.