Excluir componentes del HTML final
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)
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()'.
@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')
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.
Issue #460
Cuando la vista del componente modifica el HTML, los componentes de texto ya no son editables
Estoy intentando crear un componente personalizado que contenga algo de texto lorem ipsum en el contenido, para editarlo una vez que esté e...
Issue #689
Cambia el valor del atributo que se transmite a través de los rasgos
Hola @artf ¿Existe algún método para manipular el valor de entrada de un atributo que se pasa a través de rasgos? Por ejemplo, pasé el valo...
Issue #1864
[PREGUNTA] ¿La mejor manera de escuchar los cambios en el HTML final?
Hola, Solo tenía una pregunta rápida porque no sabía cómo hacerlo o no encontré ningún problema relacionado. Solo intento llamar a una func...
Issue #1766
¿Hay alguna forma de integrar ImageEditor en GrapesJs
Después de colocar la imagen dentro del editor, ¿existe algún plugin para que GrapesJs edite esa imagen, como recortar, añadir texto .....
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.