Editor page
Last updated
Last updated
In order to use Easyblocks your project must have a dedicated page that contains the Easyblocks Editor, called the editor page.
Creating the editor page is simple:
The config
property takes an Easyblocks configuration object described in a guide. The components
property takes the instances of your No-Code Components (described in section).
Please keep in mind that the editor page shouldn't render any extra headers, footers, popups etc. It must be blank canvas with EasyblocksEditor
being a single component rendered.
In order to embed the Easyblocks editor in your product, you should use an <iframe>
element that points to your editor page. However, in order to play around, you can simply open the editor page directly.
The editor page takes a few important query parameters:
readOnly <boolean> = true
- if set to true
, no permanent modifications will be done to existing documents or templates. Very good way to play around, debug components, documents, etc. When you open the editor page directly it's by default set to true
in order to prevent unexpected modifications.
document <string>
- the id of the document you want to open. Leaving it undefined means you're creating a new document.
rootComponent <string>
- the id of the root component. Mandatory when creating a new document (document
param is not set).
rootTemplate <string>
- the id of the template to copy when creating a new document. Can't be specified together with rootComponent
.
Examples:
https://youdomain.com/easyblocks-editor?document=abcd123
- open a document with id abcd123
in read-only mode, a good way to debug the document while being sure it won't get modified in the backend.
https://youdomain.com/easyblocks-editor?document=abcd123&readOnly=false&locale=de
- edit the document abcd123
, all the changes will be saved to the backend. The editor is opened in de
locale (German).
To listen to any of these events, you can create a callback ref to <iframe>
and add event listener to message
event in useEffect
hook:
Below is the list of events that editor can publish:
@easyblocks/closed
Published when editor should be closed because user has clicked the close button in the top bar. The format:
@easyblocks/content-saved
Published each time the editor is performing the save of current content. It can be done by autosave mechanism or when closing the editor and the data the current data hasn't been saved yet. The format:
locale <string>
- a locale id. The locale must exist in .
https://youdomain.com/easyblocks-editor?rootComponent=RootSectionsStack
- open new document with a root component RootSectionsStack
. readOnly
is not set (defaults to true
) so the document is just temporary, will never be saved to . It's the best way to start playing around with the editor.
The editor page sends events to the parent window.