Issue #626💬 AnsweredOpened December 10, 2017by z1lk0 reactions

Placing non-editable HTML around wrapper

Quick answerby z1lk

I've fiddled with the code and made a small patch that fits my needs. A config option surround lets you specify an ID, which represents an element in the container. This DOM subtree is plucked out during the main initialization, stored in the Editor config, and picked up by the Canvas. The Canvas then handles renderin...

Read full answer below ↓

Question

My CMS works like this: sites can have one theme and many templates under that theme. Themes are rendered on every page, and templates are rendered only on specific pages. I have successfully integrated GrapesJS with my existing template editor, but I have a question: is there any way to render a theme around a template in Grapes? That is, is there any way to insert non-editable HTML around the editable HTML? If I place HTML in the canvas between the body and the #wrapper, I seem to get the result I want. Is there an existing API for achieving this, and if not, is this desirable functionality...

Answers (3)

z1lkDecember 11, 2017

I've fiddled with the code and made a small patch that fits my needs. A config option surround lets you specify an ID, which represents an element in the container. This DOM subtree is plucked out during the main initialization, stored in the Editor config, and picked up by the Canvas. The Canvas t...

artfDecember 13, 2017

Greate @z1lk I think even something like this will work I close this as you've solved your case

z1lkDecember 13, 2017

I used a solution similar to yours so I don't have to maintain changes to the Grapes source. Sometimes the position of the component "tools" are out of place, as if their vertical offset is computed relative to the body and not the wrapper. I can't reliably reproduce it though. Thanks for your help...

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.