diff --git a/docs/modules/Pages.md b/docs/modules/Pages.md index 6868bacde..b2ed598b8 100644 --- a/docs/modules/Pages.md +++ b/docs/modules/Pages.md @@ -4,7 +4,7 @@ title: Pages # Pages -The Layer Manager module is responsible to manage and display your [Components] as a tree. +The Pages module in GrapesJS allows you to leverage the built-in support for creating a project with multiple pages and one page is always created under the hood, even if you don't need multi-page support. This allows to keep the API consistent and easier to extend in case you need to add multiple pages later. ::: warning This guide is referring to GrapesJS v0.21.1 or higher @@ -12,6 +12,92 @@ This guide is referring to GrapesJS v0.21.1 or higher [[toc]] +## Initialization + +The default editor initialization doesn't require any knowledge of pages and this was mainly done to avoid introducing breaking changes when the Pages module was introduced. + +This is how a typical editor initialization looks like + +```js +const editor = grapesjs.init({ + container: '#gjs', + height: '100%', + storageManager: false, + // CSS or a JSON of styles + style: '.my-el { color: red }', + // HTML string or a JSON of components + components: '
Hello world!
', + // ...other config options +}); +``` + +What actually is happening is that this configuration is automatically migrated to the Page Manager. + +```js +const editor = grapesjs.init({ + container: '#gjs', + height: '100%', + storageManager: false, + pageManager: { + pages: [ + { + // the `id` will be generated automatically if not specified + id: 'my-first-page', + // CSS or a JSON of styles + styles: '.my-el { color: red }', + // HTML string or a JSON of components + component: '
Hello world!
', + } + ] + }, +}); +``` + +::: warning +Worth noting the previous keys are `style` and `components`, where in pages you should use `styles` and `component`. +::: + +As you might guess, this is how initializing the editor with multiple pages would look like + +```js +const editor = grapesjs.init({ + // ... + pageManager: { + pages: [ + { + id: 'my-first-page', + styles: '.my-page1-el { color: red }', + component: '
Page 1
', + }, + { + id: 'my-second-page', + styles: '.my-page2-el { color: blue }', + component: '
Page 2
', + }, + ] + }, +}); +``` + +GrapesJS doesn't provide any default UI for the Page Manager but you can easily built one by leveraging its [APIs][Pages API]. Check the [Customization](#customization) section for more details on how to create your own Page Manager UI. + +::: tip API tips +Get an array of all pages: +```js +editor.Pages.getAll() +``` +Get currently selected page: +```js +editor.Pages.getSelected() +``` +Select another page by ID: +```js +editor.Pages.select('my-second-page') +``` +::: + + + ## Configuration @@ -381,4 +467,4 @@ For a complete list of available events, you can check it [here](/api/layer_mana [Components]: -[Layers API]: +[Pages API]: