Añadir sector de estilo para la regla Css específica
Hay varios inconvenientes en mi enfoque pero, como en esta app no usamos los Selectores para el Style Manager, mira lo que he hecho; He añadido una propiedad 'objetivo' personalizada a mi nuevo sector. Empecé a escuchar el 'change:open' de cada sector y, si el sector tiene mi nueva prop personalizada, establezo la reg...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf,
¿Podrías ayudar en esto? Quiero desactivar al usuario para que pueda seleccionar el bloque de envoltura (cuerpo), pero aún así quiero que pueda darle estilo. Así que estaba pensando en añadir un sector personalizado que se mostraría para todos los bloques, pero que los estilos aplicados en ese sector se aplicaran específicamente a una regla CSS. ¿Hay alguna forma de conseguirlo? Me he dedicado un tiempo a investigar el código, pero no he encontrado la manera de hacerlo
Respuestas (3)
Hay varios inconvenientes en mi enfoque pero, como en esta app no usamos los Selectores para el Style Manager, mira lo que he hecho;
He añadido una propiedad 'objetivo' personalizada a mi nuevo sector. Empecé a escuchar el 'change:open' de cada sector y, si el sector tiene mi nueva prop personalizada, establezo la regla CSS que quiero como objetivo usando 'editor'. StyleManager.setTarget('.my-class', { targetIsClass: true });' de lo contrario configuro el bloque seleccionado actual como 'editor. StyleManager.setTarget(editor.getSelected());'
Solo un ejemplo:
El usuario ha seleccionado un Bloque de Texto. En el panel del Gestor de Estilo, se mostraría tal y como está hoy. Los selectores de CSS se aplicaban a él y las secciones como General o Decoraciones para estilizarlo y, además, habría alguna sección Global que aplicaba el estilo para una regla específica de CSS
Sí, creo que es posible, deberías añadir un nuevo sector con tus entradas manualmente al cargar el editor y al cambiar la entrada actualizar el estilo del envoltorio 'editor.getWrapper().addStyle({ color: yourInputEl.value })' o si necesitas alguna regla específica de CSS 'editor. CssComposer.setRule('.your-class', { color: '...' }); `
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1780
Cómo cambiar el desplegable extra para el rasgo de cambio de enlace
Hola @artf, Quiero dar una funcionalidad más al usuario, como que el usuario pueda cambiar cualquier enlace con el desplegable de enlaces p...
Issue #1126
[Pregunta] ¿Cómo añadir un atributo personalizado en un bloque a través del Administrador de bloques?
Hola, Tengo un bloque personalizado en el que hay un atributo personalizado '@call-method="searchProduct"'. Pero cuando uso esto directamen...
Issue #1403
¿Cómo construir CSS minificados?
Hola @artf ¿Podrías explicarme cómo puedo construir CSS desde la sección de estilo? Cada vez que ejecuto "Npm run build". Solo compilación...
Issue #1827
[PREGUNTA] ¿Cómo añadir un botón en la sección (bloqueo) al pasar el cursor?
Hola @artf, Estás haciendo un gran trabajo. Intenté añadir un botón en la sección (bloque) al pasar el ratón. ¿Podrías ayudarme a añadir o...
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.