Skip to content

Latest commit

 

History

History
224 lines (146 loc) · 4.83 KB

pages.md

File metadata and controls

224 lines (146 loc) · 4.83 KB

Pages

You can customize the initial state of the module from the editor initialization

const editor = grapesjs.init({
 ....
 pageManager: {
   pages: [
     {
       id: 'page-id',
       styles: `.my-class { color: red }`, // or a JSON of styles
       component: '<div class="my-class">My element</div>', // or a JSON of components
     }
  ]
 },
})

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const pageManager = editor.Pages;

Available Events

  • page:add Added new page. The page is passed as an argument to the callback.
editor.on('page:add', (page) => { ... });
  • page:remove Page removed. The page is passed as an argument to the callback.
editor.on('page:remove', (page) => { ... });
  • page:select New page selected. The newly selected page and the previous one, are passed as arguments to the callback.
editor.on('page:select', (page, previousPage) => { ... });
  • page:update Page updated. The updated page and the object containing changes are passed as arguments to the callback.
editor.on('page:update', (page, changes) => { ... });
  • page Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
editor.on('page', ({ event, model, ... }) => { ... });

getAll

Get all pages

Examples

const arrayOfPages = pageManager.getAll();

Returns Array<Page>

add

Add new page

Parameters

  • props Object Page properties
  • opts Object? Options (optional, default {})

Examples

const newPage = pageManager.add({
 id: 'new-page-id', // without an explicit ID, a random one will be created
 styles: `.my-class { color: red }`, // or a JSON of styles
 component: '<div class="my-class">My element</div>', // or a JSON of components
});

Returns Page

remove

Remove page

Parameters

  • page (String | Page) Page or page id
  • opts any (optional, default {})

Examples

const removedPage = pageManager.remove('page-id');
// or by passing the page
const somePage = pageManager.get('page-id');
pageManager.remove(somePage);

Returns Page Removed Page

move

Move a page to a specific index in the pages collection. If the index is out of bounds, the page will not be moved.

Parameters

  • page (string | Page) Page or page id to move.

  • opts Object? Move options (optional, default {})

    • opts.at number? The target index where the page should be moved.

Examples

// Move a page to index 2
const movedPage = pageManager.move('page-id', { at: 2 });
if (movedPage) {
  console.log('Page moved successfully:', movedPage);
} else {
  console.log('Page could not be moved.');
}

Returns (Page | undefined) The moved page, or undefined if the page does not exist or the index is out of bounds.

get

Get page by id

Parameters

Examples

const somePage = pageManager.get('page-id');

Returns Page

getMain

Get main page (the first one available)

Examples

const mainPage = pageManager.getMain();

Returns Page

getAllWrappers

Get wrapper components (aka body) from all pages and frames.

Examples

const wrappers = pageManager.getAllWrappers();
// Get all `image` components from the project
const allImages = wrappers.map(wrp => wrp.findType('image')).flat();

Returns Array<Component>

select

Change the selected page. This will switch the page rendered in canvas

Parameters

  • page (String | Page) Page or page id
  • opts SetOptions (optional, default {})

Examples

pageManager.select('page-id');
// or by passing the page
const somePage = pageManager.get('page-id');
pageManager.select(somePage);

Returns this

getSelected

Get the selected page

Examples

const selectedPage = pageManager.getSelected();

Returns Page