5.3 KiB
DomComponents
With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object
const editor = grapesjs.init({
domComponents: {
// options
}
})
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
const domComponents = editor.DomComponents;
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
dataObject Object of data to load (optional, default'')
Returns Object Loaded data
store
Store components on the selected storage
Parameters
noStoreBoolean If true, won't store
Returns Object Data to store
getWrapper
Returns root component inside the canvas. Something like <body> 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
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
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 addcomponent.tagNamestring Tag name (optional, default'div')component.typestring Type of the component. Available: ''(default), 'text', 'image' (optional, default'')component.removableboolean If component is removable (optional, defaulttrue)component.draggableboolean If is possible to move the component around the structure (optional, defaulttrue)component.droppableboolean If is possible to drop inside other components (optional, defaulttrue)component.badgableboolean If the badge is visible when the component is selected (optional, defaulttrue)component.stylableboolean If is possible to style component (optional, defaulttrue)component.copyableboolean If is possible to copy&paste the component (optional, defaulttrue)component.contentstring String inside component (optional, default'')component.styleObject Style object (optional, default{})component.attributesObject 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
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
clear
Remove all components
Returns this