Issue #1133💬 RespondidoAbierto el 25 de mayo de 2018por kuldeepcisReacciones 0

Añadir un nuevo bloque con elementos y rasgos

Respuesta rápidapor artf

@kuldeepcis Creas un componente 'social-icons' como '<div>' (por defecto) y luego en init añades esto: '''html <a data-js="social-icons" href="" target="_blank" style="border: none;text-decoration: none;"class="facebook"> <img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/...

Lee la respuesta completa abajo ↓

Pregunta

Hola @artf Tengo que crear un nuevo bloque con múltiples elementos y rasgos. Como el perfil social con múltiples elementos como Facebook, G-plus, Twitter y muchos más elementos. y cada elemento tiene dos opciones: una para URL, otra para el icono que se muestra o oculta mediante una casilla de verificación. Por favor, consulta la URL de la siguiente: https://jsfiddle.net/3xhqkc96/9/ Ahora, en este rollo, tener un solo elemento con rasgos, los cambios se reflejan en la división principal del bloque, no en un elemento específico.

Por favor, proporcione la solución para la consulta anterior.

¡Gracias de antemano :)

Respuestas (2)

artf26 de mayo de 2018

@kuldeepcis Creas un componente 'social-icons' como '<div>' (por defecto) y luego en init añades esto: '''html <a data-js="social-icons" href="" target="_blank" style="border: none;text-decoration: none;"class="facebook"> <img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/facebook.png" borde="0"><!----> </a>

Luego seleccionas el '<a>' y esperas ver rasgos de 'iconos sociales', pues estás equivocado, porque ese '<a>' es otro componente...

Cambia tu lógica, haz que la 'a' sea un componente e inyecta solo la imagen
'''js
domc.addType('social-icons', {
	modelo: ...
		Predeterminados: {
			etiquetaNombre: 'a',
			atributos: {
				Objetivo: '_blank',
				...
			}
		},
		...
	VISTA: ...
		init() {
			...
			Si lo necesitas, puedes hacer que la imagen no sea 
			seleccionable con 'data-gjs-selectable="false"' 
			o simplemente ignorarlo con 'style="pointer-events:none"'
			comps.add('<img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/facebook.png" borde="0">');
		}
});
lock[bot]17 de septiembre de 2019

Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.

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.