[FEATURE REQUEST] Support rendering layouts which are not part of the editable content

Question

Basically my use case is that I want to show a whole page - with header, menu(s) and footer - in the editor canvas, but only allow the user to edit the actual content of it. The reasoning behind this is so that the users can see the page as close as it will be to the "end product".

I've been able to accomplish something like this by rendering the full page into the wrapper, using the fromElement option, and taking care to set highlightable, badgable and all the other such attributes to false on the elements belonging to the layout, but still this is not ideal as:

The root node in the "Layer Manager" is still the body, which is then un-expandable as the elements directly below it are marked as non-layerable. What I'm looking for here is that the root of the Layer Manager be the "content" element.
When viewing/exporting code, the code for the whole page is shown. What I'm looking for is to have only the code related to the "content" element appear.

@artf Is this something that makes sense as a feature? I'm ready to start working on a PR for it. Should this be implemented as an option that specifies a css selector for the element that should be the "actual editable portion"? If so, what should the option be called? rootNode, subcontainer, wrapper, subwrapper, contentElement, contentWrapper? Or, if not a config option, then there could be a documented default behaviour. For example: if one of the elements of the initial html content (when using fromElement) has an id of, say, gjs-root-node, then the behaviour described above is applied accordingly. Thoughts?

Answers (3)

artf• May 10, 20180 reactions

For the point 1 you can pass this to your init options:

...
layerManager: {
	showWrapper: 0,
},

Point 2, what about something like a custom placeholder component which just overwrites toHtml method in the model definiton

model: ...
	{
		toHTML() {
			return '';
		}
	},

artf• May 18, 20180 reactions

Hey @dsgh, did you manage to accomplish your task?

dsgh• May 18, 20180 reactions

@artf These past few days I've been busy working on other extensions to grapesjs that we're also needing. Thank you for your suggestions here - I'll investigate more about the showWrapper option, and I think your suggestion for point 2 is spot on! I should have thought of doing that.

I'll return to this later this month, and report back - if you want to close this issue in the meantime, feel free to do that, as I'm fairly confident I'll be able to solve it without any changes to grapesjs.

Thanks

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

[FEATURE REQUEST] Support rendering layouts which are not part of the editable content

Question

Answers (3)

Related Questions and Answers

[Question] How to disable editing on fetched content

[QUESTION] How to get style for header & footer components only

QUESTION: How to keep default sections in the canvas without the possibility to be removed by the user?

FEAT: Support for search and commands in the editor for custom components

Paid Plugins That Match This Issue

Browse Plugin Categories