Issue #2973💬 RespondidoAbierto el 25 de agosto de 2020por trony2020Reacciones 1

No hacer elementos extraíbles dentro de un bloque

Respuesta rápidapor RJCAM1

Así que no estoy seguro de si estas son las mejores respuestas, pero a mí me funcionan.¿Cómo saber que los elementos dentro de h4 son también data-gjs-editable="false"? Con este atributo: contentEditable="false"si borro todos los personajes de una caja y luego la caja desaparece, ¿hay alguna forma de no borrar la caja...

Lee la respuesta completa abajo ↓

Pregunta

Hola, Dado:

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

Fragmento de códigoHTML
etiqueta: 'Mappa + Descrizione',
				  content: '<div data-blockname='mappaDescrizione1'>
					  			  <br/>
							          <div data-blockname='mappaDescrizione2' style='margin:2px;border: 1px solid red'>
								  			<div><h3>Moto de prueba</h3></div>
										    <div data-gjs-type="map" style='height:200px;width:400px'></div> 
										    <div>Test Zaltbommel<br>
											     Schimminck 4<br>
											     5322 Daltbommel <br>
											     Países Bajos
											</div>
								      </div>	
							      <br/>
						  ',</div>
 });

Quiero que '<div><h3>Test Moto</h3></div>' no se pueda soltar por completo, ¿cómo se hace? ¿Con una clase? Como 
 '<clase de div='noDroppable'><h3>Moto de prueba</h3></div>'?

Gracias,
Walter

Respuestas (3)

RJCAM26 de agosto de 2020

Así que no estoy seguro de si estas son las mejores respuestas, pero a mí me funcionan.

¿Cómo saber que los elementos dentro de h4 son también data-gjs-editable="false"?

Con este atributo: contentEditable="false"

si borro todos los personajes de una caja y luego la caja desaparece, ¿hay alguna forma de no borrar la caja y mantener un ancho mínimo?

Estoy haciendo esto, pero la caja sigue ahí cuando elimino todos los personajes, prueba algunos atributos al crearla, como contentEditable

¿Por qué un solo mensaje...

No puedo reproducir este comportamiento, el texto se añade como una cadena única, quizá sea la forma en que lo declaras

RJCAM25 de agosto de 2020

Hola @trony2020 No es realmente una clase, pero puedes hacerlo añadiendo algunos atributos, como aquí en la documentación, cuando añades un nuevo componente al DOM, añade la propiedad como atributo del elemento añadido.

Ejemplo de un nuevo componente con alguna propiedad extra
var comp1 = domComponents.addComponent({
  etiquetaNombre: 'div',
  removible: false, // No se puede quitar
  arrastrable: falso, // No se puede mover
  copiable: false, // Desactivar copiar/pegar
  droppable: false, // No se pueden añadir elementos dentro
  contenido: 'Texto de contenido', // Texto dentro del componente
  estilo: { color: 'rojo'},
  atributos: { título: 'aquí' }
});

Así que puedes hacer algo así: '<div data-gjs-dropppable='false'><h3>Test Moto</h3></div>' Ahora no podrás añadir dentro de esta división

trony202026 de agosto de 2020

He intentado con

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

Fragmento de códigoHTML
etiqueta: 'TitleEB',
						  content: '"<div data-blockname='TitleForm' style='width:600px' data-gjs-removable='false'>" + data + "</div>"'							  		 
						});	

donde los datos son: 

'<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="fecha"><span>Lunes, 31 de agosto de 2020</span></span> <span class="time"><span>de 11:00 a 15:45</span></span></span>
		</h4>
	</div>	
`

Pero después de renderizar data-gjs-removable="false", ¿por qué? 

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

¡Gracias!

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.