# Canvas
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
const editor = grapesjs.init({
canvas: {
// options
}
})
Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
// Listen to events
editor.on('canvas:drop', () => { ... });
// Use the API
const canvas = editor.Canvas;
canvas.setCoords(...);
# Available Events
canvas:dragenter
- When something is dragged inside the canvas,DataTransfer
instance passed as an argumentcanvas:dragover
- When something is dragging on canvas,DataTransfer
instance passed as an argumentcanvas:drop
- Something is dropped in canvas,DataTransfer
instance and the dropped model are passed as argumentscanvas:dragend
- When a drag operation is ended,DataTransfer
instance passed as an argumentcanvas:dragdata
- On any dataTransfer parse,DataTransfer
instance and theresult
are passed as arguments.
By changing result.content
you're able to customize what is dropped
# Methods
- getConfig
- getElement
- getFrameEl
- getWindow
- getDocument
- getBody
- setCustomBadgeLabel
- hasFocus
- scrollTo
- setZoom
- getZoom
- getCoords
- setCoords
# getConfig
Get configuration object
Returns Object (opens new window)
# getElement
Get the canvas element
Returns HTMLElement (opens new window)
# getFrameEl
Get the main frame element of the canvas
Returns HTMLIFrameElement (opens new window)
# getWindow
Get the main frame window instance
Returns Window (opens new window)
# getDocument
Get the main frame document element
Returns HTMLDocument
# getBody
Get the main frame body element
Returns HTMLBodyElement (opens new window)
# setCustomBadgeLabel
Set custom badge naming strategy
# Parameters
# Examples
canvas.setCustomBadgeLabel(function(component){
return component.getName();
});
# getRect
Get canvas rectangular data
Returns Object (opens new window)
# hasFocus
Check if the canvas is focused
Returns Boolean (opens new window)
# scrollTo
Scroll canvas to the element if it's not visible. The scrolling is
executed via scrollIntoView
API and options of this method are
passed to it. For instance, you can scroll smoothly by using
{ behavior: 'smooth' }
.
# Parameters
opts
Object (opens new window) Options, same as options forscrollIntoView
(optional, default{}
)opts.force
Boolean (opens new window) Force the scroll, even if the element is already visible (optional, defaultfalse
)
# Examples
const selected = editor.getSelected();
// Scroll smoothly (this behavior can be polyfilled)
canvas.scrollTo(selected, { behavior: 'smooth' });
// Force the scroll, even if the element is alredy visible
canvas.scrollTo(selected, { force: true });
# setZoom
Set canvas zoom value
# Parameters
value
Number (opens new window) The zoom value, from 0 to 100
# Examples
canvas.setZoom(50); // set zoom to 50%
Returns this
# getZoom
Get canvas zoom value
# Examples
canvas.setZoom(50); // set zoom to 50%
const zoom = canvas.getZoom(); // 50
Returns Number (opens new window)
# setCoords
Set canvas position coordinates
# Parameters
x
Number (opens new window) Horizontal positiony
Number (opens new window) Vertical position
# Examples
canvas.setCoords(100, 100);
Returns this
# getCoords
Get canvas position coordinates
# Examples
canvas.setCoords(100, 100);
const coords = canvas.getCoords();
// { x: 100, y: 100 }
Returns Object (opens new window) Object containing coordinates
# addFrame
Add new frame to the canvas
# Parameters
props
Object (opens new window) Frame properties (optional, default{}
)opts
(optional, default{}
)
# Examples
canvas.addFrame({
name: 'Mobile home page',
x: 100, // Position in canvas
y: 100,
width: 500, // Frame dimensions
height: 600,
// device: 'DEVICE-ID',
components: [
'<h1 class="testh">Title frame</h1>',
'<p class="testp">Paragraph frame</p>',
],
styles: `
.testh { color: red; }
.testp { color: blue; }
`,
});
Returns Frame
← I18n Frame →