Issue #3025💬 RespondidoAbierto el 15 de septiembre de 2020por trony2020Reacciones 0

Hacer que los elementos internos no sean movibles con propagar

Respuesta rápidapor artf

Puedes colocar otro componente personalizado en el centro que propague esas propiedades y también el 'arrastrable' o, como el droppable es falso en todos los componentes, puedes simplemente actualizar todos los componentes internos en init '''js const doTheThing = items => items.forEach(item => { item.set({ arrastrabl...

Lee la respuesta completa abajo ↓

Pregunta

Fragmento de códigoTEXT
Hola, al crear un componente/bloque, queremos que los elementos internos no sean eliminados, editados ni movidos:
No se han eliminado ni editado, ¿vale? ¿Cómo hacer que no sean móviles?
¡Gracias!

$.get( "/iscrizionePrivacy.plp?a=VGsflaU2d7D0sUcDhl7lCkkX8tE1UW9kBzLcqcUAR_8-yKo74nLUmyXKrfIUst_kUirvlSC_A5sqeHrBsznmUg&locale=it_IT&fromBE=true", function( data ) {					  								    	
				    editor. DomComponents.addType('eb-privacy', {
				    	  Haz que el editor entienda cuándo asignar 'mi-input-type'
				    	  isComponent: el => el.tagName === 'ENTRADA',
				    	  Definición del modelo
				    	  modelo: {
				    	    Propiedades predeterminadas
				    	    Predeterminados: {
				    	      etiquetaNombre: 'entrada',
				    	      arrastrable: 'forma, forma *', // Solo puede caerse dentro de los elementos de 'forma'
				    	      Droppable: falso, // No se pueden colocar otros elementos dentro
				    	      editable: false,
				    	      removible: falso,
				    	      redimensionable: cierto,	
				    	      propagar: ['droppable', 'editable', 'removible'],
				    	      Componentes: Datos				    	      
				    	      
}
				    	  }
				    	});			    			    			       
				   editor. BlockManager.add('test-COMPONENT-PRIVACY', {
				    	  etiqueta: 'prueba-COMPONENT-PRIVACIDAD',
				    	  contenido: '<div data-gjs-type="eb-privacy">Componente de privacidad de prueba</div>',
				   });				    				    
			 	});

Respuestas (3)

artf16 de septiembre de 2020

Puedes colocar otro componente personalizado en el centro que propague esas propiedades y también el 'arrastrable' o, como el droppable es falso en todos los componentes, puedes simplemente actualizar todos los componentes internos en init '''js const doTheThing = items => items.forEach(item => { item.set({ arrastrable: false, removible: false, ... }) doTheThing(item.components()); }); editor. DomComponents.addType('eb-privacy', { ... Defaults: { ... },

init() { doTheThing(this.components()); } ...

trony202016 de septiembre de 2020
Fragmento de códigoTEXT
Siguiendo las copias de código solo "........ doTheThing 3......" Parece que no se llama init()

'$.get( "/iscrizionePrivacy.plp?a=VGsflaU2d7D0sUcDhl7lCkkX8tE1UW9kBzLcqcUAR_8-yKo74nLUmyXKrfIUst_kUirvlSC_A5sqeHrBsznmUg&locale=it_IT&fromBE=true", function( data ) {					  								    	
				    
const doTheThing = items => items.forEach(item => {
			    	    item.set({ arrastrable: false })
			    	    console.log (" ........ doTheThing 2...... ");
			    	    doTheThing(item.components());
			    	});
			    	console.log (" ........ hacer LaCosa 3...... ");
			    	
editor. DomComponents.addType('eb-privacy', {
				    	  Haz que el editor entienda cuándo asignar 'mi-input-type'
				    	  isComponent: el => el.tagName === 'ENTRADA',
				    	  Definición del modelo
				    	  modelo: {
				    	    Propiedades predeterminadas
					    	    Predeterminados: {
					    	        etiquetaNombre: 'entrada',
					    	        arrastrable: 'forma, forma *', // Solo puede caerse dentro de los elementos de 'forma'
					    	        Droppable: falso, // No se pueden colocar otros elementos dentro
					    	        editable: false,
					    	        removible: falso,
					    	        redimensionable: cierto,	
					    	        propagar: ['droppable', 'editable', 'removible'],
					    	        Componentes: Datos				    	      
					    	      
},
					    	    init() {
					    	    	console.log (" ........ hacer LaCosa 1...... ");
					    	        doTheThing(this.components());
					    	    }				    	    
				    	  }
				    	  
});			    			    			       
				   editor. BlockManager.add('test-COMPONENT-PRIVACY', {
				    	  etiqueta: 'prueba-COMPONENT-PRIVACIDAD',
				    	  contenido: '<div data-gjs-type="eb-privacy">Componente de privacidad de prueba</div>',
				   });				    				    
			 	});`
artf23 de septiembre de 2020

Tienes que usar el componente del lienzo

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 →

Explorar categorías de plugins

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