Issue #2973Opened August 25, 2020by trony20201 reactions

make not removable elements inside a block

Question

Hello, Given:

editor.BlockManager.add('test-component', { id: 'MappaPiuDescrizione',

Code SnippetHTML
label: 'Mappa + Descrizione',
				  content: `<div data-blockname='mappaDescrizione1'>
					  			  <br/>
							          <div data-blockname='mappaDescrizione2' style='margin:2px;border: 1px solid red'>
								  			<div><h3>Test Moto</h3></div>
										    <div data-gjs-type="map" style='height:200px;width:400px'></div> 
										    <div>Test Zaltbommel<br>
											     Schimminck 4<br>
											     5322 Daltbommel <br>
											     Netherlands
											</div>
								      </div>	
							      <br/>
						  </div>`,
 });

I want to make `<div><h3>Test Moto</h3></div>` not droppable, how it's done? With a class ? Like 
 `<div class='notDropppable'><h3>Test Moto</h3></div>` ?

thanks,
Walter

Answers (3)

RJCAMAugust 26, 20201 reactions

So, I'm not sure if this are the best answers but they work for me.

How to tell elements inside h4 are data-gjs-editable="false" also?

With this attribute: contentEditable="false"

if I delete all chars in a box then the box disappear, is there a way to not delete the box and keep a min-width?

I'm doing this but the box still remains when removed all chars, try some attributes when creating it like contentEditable

Why a single text...

I'm not able to reproduce this behavior, the text is added as a unique string, perhaps can be the way your declaring it

RJCAMAugust 25, 20200 reactions

Hi @trony2020 Not really a class, but you can do it adding some attributes indeed, like here in the documentation, when you add a new component to the DOM, it adds the property as an attribute of the added element.

// Example of a new component with some extra property
var comp1 = domComponents.addComponent({
  tagName: 'div',
  removable: false, // Can't remove it
  draggable: false, // Can't move it
  copyable: false, // Disable copy/past
  droppable: false, // Can't add elements inside
  content: 'Content text', // Text inside component
  style: { color: 'red'},
  attributes: { title: 'here' }
});

So you can do something like this: <div data-gjs-dropppable='false'><h3>Test Moto</h3></div> Now you wont be able to add inside this div

trony2020August 26, 20200 reactions

I've tried with

editor.BlockManager.add('Title-component', { id: 'TitleEB',

Code SnippetHTML
label: 'TitleEB',
						  content: `"<div data-blockname='TitleForm' style='width:600px' data-gjs-removable='false'>" + data + "</div>"`							  		 
						});	

where data is: 

`<div id="headerText" class="info " data-ebplatform-template-elementId="boxHeader" data-ebplatform-template-role="borderedBox">
		<h3><span data-eventname="true" data-gjs-removable="false">ititiit</span></h3>
		<h4 data-gjs-removable="false" aa="test">
			<span class="eventDate long"><span class="date"><span>Monday, August 31, 2020</span></span> <span class="time"><span>from 11:00 AM to 3:45 PM</span></span></span>
		</h4>
	</div>	
`

but after rendereing data-gjs-removable="false" disappeared, why? 

![image](https://user-images.githubusercontent.com/57098736/91301525-5cc11800-e7a5-11ea-94da-b122099677c8.png)

thanks!

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.