Prevent editing some components
Yeah, @MichaelKlemersson is right currently you have to set them manually on any element. Another trick would be to update all children via model But what I think would be the best it's some kind of property which propagates (suggestions for a better term are welcome) properties from the parent to its children, eg. wh...
Read full answer below ↓Question
I would like to prevent users from editing the internal components of specific components.
IE lets say I have an element called Drupal-Block
<div data-block>
... html inside ..
</div>
I want to prevent the users from editing the ... html inside... bit
Answers (3)
Yeah, @MichaelKlemersson is right currently you have to set them manually on any element. Another trick would be to update all children via model
const updateAll = model => {
model.set({editable: false, ...});
model.get('components').each(model => updateAll(model));
}
updateAll(component);
But what I think would be the best it's some kind of property which propagates (suggestions for a better term are welcome) properties from the parent to its children, eg.
<div data-gjs-editable="false" data-gjs-propagate="['editable', ...]">
<!-- this will be not editable too and the same for its children -->
<div>...</div>
<!-- possibility to overwrite and 'break' the chain -->
<div data-gjs-editable="true" data-gjs-propagate=""></div>
</div>
what do you think?
Yes i think that the propagation idea is great. To be clear the reason im looking for this is im building out a module for Drupal 8 that will allow creating themes via the GrapeJS tool. In Drupal you have elements called Blocks, and my thought was to block of editing of those on the Main editor, and instead have a popup editor to edit them and allow reusing those across various pages.
This is due to how Drupal renders content via PHP and thus I need to convert the html to php variables when storing the template into a twig file.
An example you can use in the demo
- Select an element (eg. some section)
- Execute this in console
editor.getSelected().append(`
<div data-gjs-removable="false" data-gjs-draggable="false" data-gjs-propagate='["removable", "draggable"]' style="color:blue">
<div>Comp01</div>
<div>
<div>Comp11</div>
<div data-gjs-stop="1" data-gjs-removable="true" data-gjs-draggable="true" data-gjs-propagate='["stop"]' style="color:red">
<div>Comp21</div>
<div>Comp22</div>
</div>
<div>
<div>Comp31</div>
<div>Comp32</div>
</div>
</div>
<div>Comp03</div>
</div>
`)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3409
[QUESTION] Custom component property that is not a trait
I would like to create a custom component with a property that will be updated by specific code, but I don't want this property to be visib...
Issue #1588
[QUESTION]
Hi guys and thank you for your magnificent work and this API! I have a question about the box, which wraps all components after saving. For...
Issue #490
Prevent modifying specific image components
I have a use case where I would like to make some specific components completely locked down (i.e. not resizable, not draggable, not copyab...
Issue #3346
Can I develop my own stylemanager and bind the properties conveniently?
I want to build my own stylemanager useing some UI framework like Element-UI to make a beauty UI quickly. But how can I bind the properties...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Tutorial
GrapesJS vs Gutenberg: How to Build a Custom WordPress Page Builder
Compare GrapesJS and Gutenberg, learn when to use each, and follow a step-by-step guide to build a production WordPress page builder with GrapesJS.
Tutorial
How to Build a Drag-and-Drop Page Builder in Angular Using GrapesJS (Step-by-Step Guide + Code)
Build a visual drag-and-drop page builder in Angular with GrapesJS. Learn setup, plugins, and backend saving in this full code guide.
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.