Issue #628💬 RespondidoAbierto el 11 de diciembre de 2017por AH1N1Reacciones 3

Excluir componentes del HTML final

Respuesta rápidapor ryandeba1

Hola @AH1N1, ¿Con "html final" te refieres al valor devuelto de 'editor.getHtml()'? ¿Y te refieres a un componente personalizado? Si la respuesta a ambas preguntas es sí, entonces deberías poder sobrescribir el método 'toHTML' de tu componente personalizado para no devolver nada. El código para hacerlo sería algo así:...

Lee la respuesta completa abajo ↓

Pregunta

¿Existe alguna solución lista para excluir algunos componentes del HTML final? ¿O algún otro mecanismo que haga que los componentes existan solo en la vista?

Respuestas (3)

ryandeba12 de diciembre de 2017

Hola @AH1N1,

¿Con "html final" te refieres al valor devuelto de 'editor.getHtml()'? ¿Y te refieres a un componente personalizado? Si la respuesta a ambas preguntas es sí, entonces deberías poder sobrescribir el método 'toHTML' de tu componente personalizado para no devolver nada. El código para hacerlo sería algo así:

var defaultType = editor. DomComponents.getType("default");
editor. DomComponents.addType("someCustomComponent", {
	model: defaultType.model.extend({
		toHTML: function() {
			return ""; devolver una cadena vacía en lugar del comportamiento predeterminado toHTML
		}
	}, {
		isComponent: function(el){
			Añade lógica isComponent personalizada aquí
		}
	}),
	view: defaultType.view
});

Si tienes otra idea en mente, dime algunos detalles adicionales y puedo intentar ayudarte más.

Por cierto, @artf ¿qué opinas de hacer que la mayúscula 'HTML/HTML' sea consistente entre 'editor.getHtml()' y 'component.toHTML()'? No tengo preferencia sobre qué estilo elegir, pero creo que tendría más sentido cambiarlos a 'editor.getHtml() / component.toHtml()' o 'editor.getHTML() / component.toHTML()'.

ryandeba12 de diciembre de 2017

@AH1N1 Aquí tienes un ejemplo de código funcional: https://jsfiddle.net/tt32z2uz/2/. Abre la consola del navegador y deberías ver esto cerrado de sesión: '<div>aquí tienes contenido normal</div><div>... contenido más normal</div>'.

¿Eso te da lo que necesitas para depurar tu código? Si no, ¿puedes proporcionar un ejemplo de código en vivo de tu implementación?

Algunas posibles razones que se me ocurren por las que esto podría no funcionar para ti:

  • El método 'isComponent' no identifica correctamente tu componente personalizado
  • La instancia del editor ya ha analizado los componentes antes de que se registre el tipo de componente personalizado (por ejemplo, usando 'fromElement: true')
artf21 de diciembre de 2017

Hola @afotey

¿Y si quisiera devolver solo el ID de un div tal como se introdujo en el panel de Configuración de Componentes?

El ID asignado desde la configuración de componentes va directamente dentro de 'attributes', así que puedes usar esto '''js const comp = editor.getSelected(); id de const = comp.getAttributes()['id'];


> ¿Hay alguna forma de que la exportación sea SOLO esos IDs y NO ninguno de los HTML/CSS que lo acompañan?

Obtienes otros IDs cuando tu componente tiene algo de estilo. Si usas clases no deberías ver ninguna de esas

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.