How to get HTML of every pages at once ?

[echobinod]

I can get HTML of each page using pageId this way.
const pageManager = Editor.Pages;
const html = pageManager.get("pageId").getMainFrame().getComponent.getEl();

I have to select the page to get it's HTML.
pageManager.select(pageId)

I don't want to select the page to get its HTML because it switch pages on canvas.

[artf]

You can do this

const allPages = editor.Pages.getAll();
const htmlAll = allPages.map(p => p.getMainComponent().toHTML())

[gxanshu]

and how to get CSS of all pages?

[lexoyo]

Maybe you can use what I did here?

const component = page.getMainComponent()
const html = editor.getHtml({ component })
const css = editor.getCss({ component })

Not sure how different it is from the .toHTML() way?

[gxanshu]

Thanks, it works ✨

[sridharK64]

@artf allPages.map(p => p.getMainComponent().toHTML()) by using this we only getting HTM, is there any way to get Css with it, for example allPages.map(p => p.getMainComponent().toCSS())

const component = page.getMainComponent()
const html = editor.getHtml({ component })
const css = editor.getCss({ component })
in this way we only getting current page html & css

[sridharK64]

Thank you very much for responding
const cssAll = allPages.map(p => editor.getCss({ p.getMainComponent() })); -> by using this getting only Main page or first page css repeatedly.
as @artf shared above code is working for HTML, not working to get css
const cssAll = allPages.map(p => editor.getCss({ p.getMainComponent() })); there is syntax error, i think we need to use editor.getCss(p.getMainComponent() )
plz refer the SS

[lexoyo]

{ p.getMainComponent() } probably needs to be { component: p.getMainComponent() }

[sridharK64]

Thank you very much, @lexoyo. It is working as expected. Have a nice day!

[sridharK64]

Hi,
there is a issue with grapesjs-tailwind & grapesjs-plugin-ckeditor, when i was using both together i unable to use grapesjs-plugin-ckeditor options like pointes, font size etc,

here i provided the SS

1. when tailwind installed
   
2. with out tailwind css
   

nothing is changes,

also when i was using grapesjs-plugin-ckeditor, i unable to edit link when we drag & drop

[artf]

@sridharK64 please avoid creating a big off-topic discussion. Create a new discussion if it's necessary.