[QUESTION]: I'm trying to duplicate the page, but the styles are not geting applied due to the Ids, changes to -2,-3 at the end.
Question
const duplicatePage = (editor) => {
let components = editor.getHtml();
let css = editor.getCss();
let newPage = editor.Pages.add({
styles: css,
component: components,
});
editor.Pages.select(newPage);
};
This is what my function looks like. I am trying duplicate the page, the HTML part is fine but as css is applied through ids, when a new page render the ids changes with -2 in end of them. Is there any to prevent it, or any other way of doing this?
Answers (3)
@sanchit36 Hello, are you solving the problem? Can you tell how?
Use this
const page = editor?.Pages.getSelected();
editor?.Pages.add({
id: (page.get('name') || page.id) + '-copy',
component: page.getMainComponent().clone()
}, { select: true });```
@vlont Thanks!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6685
BUG: Custom component styles are not applied after deletion and re-addition
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v143.0.7499.193 Reproducible demo l...
Issue #2083
[QUESTION] model.get('toolbar') always return null
Hi @artf I am trying to add a custom toolbar to my custom component without changing the default toolbar. So I expect it to be like [movabl...
Issue #2922
[QUESTION]: Get all css without specific component and it's children
Hi, so, in this issue #2861 we can get all the css of a selected element and it's children with: But if I want to get all the css but witho...
Issue #1875
[QUESTION] ID changes when importing html or passing html in components prop in config.
Hi, I built a component and block that I can drag and drop in the canvas. My issue is that some styles rely on the ID. I know this might no...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.