Issue #2922💬 RespondidoAbierto el 27 de julio de 2020por RJCAMReacciones 2

Consigue todo CSS sin componentes específicos y sus hijos

Respuesta rápidapor mcottret1

¡Hola @RJCAM! No creo que haya una forma incorporada de lograr esto, pero basándote en la respuesta que enlazaste, puedes concatenar recursivamente el CSS de todos los componentes, filtrando el seleccionado y sus hijos como lo siguiente (asumiendo que 'window.editor' para el ejemplo, puede que necesite adaptarse): '''...

Lee la respuesta completa abajo ↓

Pregunta

Hola, en este número #2861 podemos obtener todo el CSS de un elemento seleccionado y sus hijos con:

componente const = editor.getSelected();
sea componentCss = editor. CodeManager.getCode(component, 'css', {
   CSSC: Editor. CSSComposer
});

Pero si quiero conseguir todo el CSS pero sin componente específico y son hijos o exactamente lo contrario de lo anterior ¿Hay alguna forma de hacerlo?

Respuestas (3)

mcottret28 de julio de 2020

¡Hola @RJCAM!

No creo que haya una forma incorporada de lograr esto, pero basándote en la respuesta que enlazaste, puedes concatenar recursivamente el CSS de todos los componentes, filtrando el seleccionado y sus hijos como lo siguiente (asumiendo que 'window.editor' para el ejemplo, puede que necesite adaptarse):

'''Manuscrito mecanografiado función getAllExceptSelectedComponentsCss(includeWrapper = true) { const selectedComponent = editor.getSelected();

¿Devolución incluyeEnvoltorio? allExceptoComponentesCssReducer('', editor.getWrapper()) : editor.getComponents().reduce(allExceptoComponentesSeleccionadosCssReducer, '') ;

function allExceptoComponentesCssReductor(todosExceptoComponentesSeleccionadosCss, component) { if (component !== selectedComponent) { /** * Desde el editor. CodeManager.getCode también recupera un componente de estilos hijos, necesitamos silenciosamente * eliminar los hijos de cada componente antes de recuperar su CSS, y volver a añadirlos después, porque el * un componente seleccionado podría estar anidado. */ const childrenComponents = component.components().models;

component.vacío({silencioso: true});

allExceptoComponentesSeleccionadosCss += editor. CodeManager.getCode(component, 'css', { CSSC: Editor. CSSComposer });

si (childrenComponents.length) { component.append(childrenComponents, {silent: true}); allExceptoComponentesSeleccionadosCss = niñosComponentes.reduce(todosExceptoComponentesSeleccionadosCssReductor, todosExceptoComponentesSeleccionadosCss); } }

return allExceptoComponentesSeleccionadosCss; } }


¡Salud!

_EDITED: estilos fijos de componentes anidados recuperados por parents_
mcottret28 de julio de 2020

@RJCAM lo siento, acabo de notar que mi respuesta anterior no funcionaba porque recuperar el CSS de un componente con hijos también incluía el CSS de los niños (por lo tanto, producía estilos duplicados, así como el estilo del componente seleccionado si estaba anidado). Lo edité para arreglarlo.

RJCAM28 de julio de 2020

Hola @mcottret, gracias por tu respuesta Creo que tienes razón, voy a editar tu código para que funcione como espero ¡De verdad aprecio tu ayuda, 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 →

Explorar categorías de plugins

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