Consigue todo CSS sin componentes específicos y sus hijos
¡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)
¡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_
@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.
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.
Issue #3137
Cuando selecciono un elemento en particular, no obtengo sus estilos. Este problema solo ocurre con algunos elementos.
No captando estilos del elemento seleccionado Aquí está mi código, Modelo const = editor. StyleManager.getModelToStyle(component); sea styl...
Issue #1325
Cómo desactivar la caída para bloques/componentes específicos
Hola, Con el siguiente código podemos indicar si es posible eliminar otros(s) componentes(s) dentro de ese componente en particular...: Que...
Issue #3627
[PREGUNTA]: Estoy intentando duplicar la página, pero los estilos no se aplican debido a los IDs, cambios a -2,-3 al final.
'''javascript const duplicatePage = (editor) => { sea components = editor.getHtml(); sea css = editor.getCss(); sea newPage = editor. Pages...
Issue #1859
Cambiar el tipo de elemento en el editor
Hola, En mi javascript ya creo 2 componentes (tipo "A" y tipo "B") con sus propias características. Creo un menú contextual en ambos elemen...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.