You can use the editor as an <iframe>, providing more flexibility to your project. Utilize URL query parameters to set custom options, and exchange data dynamically through message events, effectively manipulating the editor. Embed your unique ideas into the project, creating a new dimension of experience.
Options
| Query | value |
|---|---|
| hideEdit | true | false |
| hideLoad | true | false |
| hideScreenXl | true | false |
| hideScreenl | true | false |
| hideScreenM | true | false |
| hideScreenS | true | false |
| hideSpacing | true | false |
| hideOutline | true | false |
| hideHidden | true | false |
| hideMarker | true | false |
| hideAnalyzeWidget | true | false |
Events
From Iframe
When using <iframe />, try checking events with
window.addEventListener('message', console.log)
| Name | Data |
|---|---|
| saveProject | {
type: 'saveProject',
pages: [...],
widgetGroups: [...]
}
|
| widgetGroupsMutation | {
type: 'widgetGroupsMutation',
widgetGroups: [...]
}
|
| pageMutation | {
type: 'pageMutation',
pages: [...]
}
|
To Iframe
You can transmit events through <iframe id="editor" />.
editor.contentWindow.postMessage(data, '*')
| Name | Data |
|---|---|
| loadData | {
type: 'loadData',
pages: [...],
widgetGroups: [...]
}
|
| importWidgets | {
type: 'importWidgets',
widgetGroups: [...]
}
|