Issue #1822💬 RespondidoAbierto el 21 de febrero de 2019por arthuralmeidapReacciones 1

Añadir sector de estilo para la regla Css específica

Respuesta rápidapor arthuralmeidap1

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)

arthuralmeidap7 de marzo de 2019

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());'

arthuralmeidap21 de febrero de 2019

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

artf22 de febrero de 2019

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.

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.