API Components

Artur Arseniev edited this page Aug 31, 2016 · 3 revisions

DomComponents

With this module is possible to manage components inside the canvas. Before using methods you should get first the module from the editor instance, in this way:

var domComponents = editor.DomComponents;

Parameters

  • config Object Configurations
    • config.components (string|Array.<Object>)= HTML string or an array of possible components (optional, default [])

Examples

...
domComponents: {
    components: '<div>Hello world!</div>',
}
// Or
domComponents: {
   components: [
     { tagName: 'span', style: {color: 'red'}, content: 'Hello'},
     { style: {width: '100px', content: 'world!'}}
   ],
}
...

addComponent

Add new components to the wrapper's children. It's the same as 'domComponents.getComponents().add(...)'

Parameters

  • component (Object|Component|Array.<Object>) Component/s to add
    • component.tagName string= Tag name (optional, default 'div')
    • component.type string= Type of the component. Available: ''(default), 'text', 'image' (optional, default '')
    • component.removable boolean= If component is removable (optional, default true)
    • component.draggable boolean= If is possible to move the component around the structure (optional, default true)
    • component.droppable boolean= If is possible to drop inside other components (optional, default true)
    • component.badgable boolean= If the badge is visible when the component is selected (optional, default true)
    • component.stylable boolean= If is possible to style component (optional, default true)
    • component.copyable boolean= If is possible to copy&paste the component (optional, default true)
    • component.content string= String inside component (optional, default '')
    • component.style Object= Style object (optional, default {})
    • component.attributes Object= Attribute object (optional, default {})

Examples

// Example of a new component with some extra property
var comp1 = domComponents.addComponent({
  tagName: 'div',
  removable: true, // Can't remove it
  draggable: true, // Can't move it
  copyable: true, // Disable copy/past
  content: 'Content text', // Text inside component
  style: { color: 'red'},
  attributes: { title: 'here' }
});

Returns (Component|Array.<Component>) Component/s added

clear

Remove all components

Returns this

getComponents

Returns wrapper's children collection. Once you have the collection you can add other Components(Models) inside. Each component can have several nested components inside and you can nest them as more as you wish.

Examples

// Let's add some component
var wrapperChildren = domComponents.getComponents();
var comp1 = wrapperChildren.add({
  style: { 'background-color': 'red'}
});
var comp2 = wrapperChildren.add({
  tagName: 'span',
  attributes: { title: 'Hello!'}
});
// Now let's add an other one inside first component
// First we have to get the collection inside. Each
// component has 'components' property
var comp1Children = comp1.get('components');
// Procede as before. You could also add multiple objects
comp1Children.add([
  { style: { 'background-color': 'blue'}},
  { style: { height: '100px', width: '100px'}}
]);
// Remove comp2
wrapperChildren.remove(comp2);

Returns Components Collection of components

getWrapper

Returns root component inside the canvas. Something like

inside HTML page The wrapper doesn't differ from the original Component Model

Examples

// Change background of the wrapper and set some attribute
var wrapper = domComponents.getWrapper();
wrapper.set('style', {'background-color': 'red'});
wrapper.set('attributes', {'title': 'Hello!'});

Returns Component Root Component

load

Load components from the passed object, if the object is empty will try to fetch them autonomously from the selected storage The fetched data will be added to the collection

Parameters

  • data Object Object of data to load

Returns Object Loaded data

render

Render and returns wrapper element with all components inside. Once the wrapper is rendered, and it's what happens when you init the editor, the all new components will be added automatically and property changes are all updated immediately

Returns HTMLElement

store

Store components on the selected storage

Parameters

  • noStore Boolean If true, won't store

Returns Object Data to store

toggleEvents

Enable/Disable events

Parameters