Issue #422✓ SolvedOpened October 15, 2017by cmcintosh8 reactions

Prevent editing some components

快速解答by artf4

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)

👍 Most helpfulartfOctober 17, 2017

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?

cmcintoshOctober 17, 2017

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.

artfOctober 20, 2017

An example you can use in the demo

  1. Select an element (eg. some section)
  2. 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.

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.