GJS Canvas inside actual website

[adam3278]

Hello,
How to move GJS Canvas (gjs-frame-wrapper) into actual website layout - you have real website with navigation, footer, etc., but without content, and want to project it on top of it for better view. I need to move the frame-wrapper element without destroying the whole functionality. Also, GJS is using iframe, so putting iframe inside an iframe isn't good idea but there is no one I see.

[artf]

I'm not sure I understand your use case, what do you mean by project it on top of it for better view?

[adam3278]

GrapesJS allows me to create very powerful content drag&drop editor, but the created content is being displayed over the canvas (frame-frapper) that does not look as the actual website. If you project the whole website there is no problem, but when you use gjs to project the content for CMS pages there is a problem. Most of my app users would use the simplest fixed dimensions, so if they don't see the content fit the proper page with the whole layout, they would be very unhappy. The solution is to display the proper website under the gjs canvas, but the question is - is there any built-in way to do this? Would the gjs break if I move the container myself via js?

[mosh-tudor]

@adam3278

For myself, I did a little the opposite, not GrapesJs in the site, but parts of the site in the editor itself.

Header:

export default (editor: TEditor) => {
  axiosInstance
    .post(...get_header_params...)
    .then((response: any) => {
      const canvasBody = this.canvas.getBody();
      const contentWrapper = document.createElement('div');
      contentWrapper.classList.add('gjs-website-header');
      contentWrapper.innerHTML = response.html;
      canvasBody.prepend(contentWrapper);
    })
    .catch(error => {
      ...
    });
};

and canvasBody.append(contentWrapper); for footer.

Maybe this will work for you too.

[adam3278]

It’s quite a bypass and my cms does not handle any dom hierarchy modifications (content is wrapped about 3 times from the rest of ui), but there’s no other solution I see. Thanks

[mosh-tudor]

@adam3278

but there’s no other solution I see

Just check https://grapesjs.com/docs/getting-started.html#start-from-the-canvas

I see almost no problems using GrapesJS inside the site, just:

• add a div with the needed id in the right place and
• initialize the editor there
• the only thing you need to remember is that the editor inserts a BODY tag (as wrapper), and you need to remove it if you plan to generate only part of the page

[artf]

@adam3278 I can also suggest checking these approaches that were asked for a similar question.