El gestor de estilo no funciona (los estilos no tienen efecto)
Gracias por informar de esto, @aliibrahim123. Gracias por compartir tu informe sobre el gestor de estilo que no funciona (los estilos no tienen efecto). Para ayudar al equipo a investigar y priorizar esto: Por favor, proporciona: Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle) Tu GrapesJS número de versión Infor...
Lee la respuesta completa abajo ↓Pregunta
Hola, Estoy trabajando en un plugin que añadirá todas las propiedades de CSS3 a Grapesjs. Pero todo el tiempo que uso el Style Manager, el estilo no aparece, versión: 1.17.19 analizador CSS: grapesjs-parser-postcss
Sectores de Gestión de Estilo
`[{ nombre: 'General', buildProps: ['flotar', 'mostrar', 'posición', 'arriba', 'derecha', 'izquierda', 'abajo'], Propiedades:[{ nombre: 'Alignment', propiedad: 'flotar', Tipo: 'Radio', Valores predeterminados: 'ninguno', lista: [ { valor: 'ninguno', claseNombre: 'fa fa-times'}, { valor: 'left', className: 'fa fa-align-left'}, { valor: 'right', className: 'fa fa-align-right'} ], }, { propiedad: 'posición', tipo: 'select'}, { Nombre: 'Display', Propiedad: 'Display', tipo: 'select', Valores predeterminados: 'ninguno', lista: [{valor: 'inline', nombre: 'inline'}, {valor: 'bloqueo', nombre: 'bloque'}, {valor: 'contenidos', nombre: 'contenidos'}, {valor: 'flex', nombre: 'flex'}, {valor: 'cuadrícula', nombre: 'cuadrícula'}, {valor: 'inline-block', nombre: 'inline-block'}, {valor: 'inline-flex', nombre: 'inline-flex'}, {valor: 'cuadrícula en línea', nombre: 'cuadrícula en línea'}, {valor: 'inline-table', nombre: 'inline-table'}, {valor: 'Ítem-lista', Nombre: 'Ítem-Lista'}, {valor: 'run-in', nombre: 'run-in'}, {valor: 'Tabla', Nombre: 'Tabla'}, {valor: 'leyenda de tabla', nombre: 'leyenda de tabla'}, {valor: 'grupo-columna-tabla', nombre: 'grupo-columna-tabla'}, {valor: 'grupo-encabezado-tabla', nombre: 'grupo-encabezado-tabla'}, {valor: 'grupo-pies de mesa', nombre: 'grupo-pies de mesa'}, {valor: 'grupo-fila-tabla', nombre: 'grupo-fila-tabla'}, {valor: 'celda de mesa', nombre: 'celda de mesa'}, {valor: 'columna-tabla', nombre: 'columna-tabla'}, {valor: 'fila de mesa', nombre: 'fila de mesa'}, {valor: 'ninguno', nombre: 'ninguno'}, {valor: 'inicial', nombre: 'inicial'}, {valor: 'heredar', nombre: 'heredar'},], } ], },{ nombre: 'Dimension', abierto: falso, buildProps: ['ancho', 'ancho flexible', 'altura', 'ancho máximo', 'altura mínima', 'margen', 'acolchado'], Propiedades: [{ id: 'flexibilidad-anchura', tipo: 'entero', nombre: 'Ancho', Unidades: ['PX', '%'], Propiedad: 'Base flexible', Requerir: 1, },{ Propiedad: 'Margen', Propiedades:[ { nombre: 'Top', propiedad: 'margen-top'}, { nombre: 'Derecha', propiedad: 'margen-derecha'}, { nombre: 'Bottom', propiedad: 'margen-bottom'},
{ nombre: 'Izquierda', propiedad: 'margen-izquierda'}
],
},{
Propiedad: 'acolchado',
Propiedades:[
{ nombre: 'Top', propiedad: 'tapping-top'},
{ nombre: 'Right', propiedad: 'padding-right'},
{ nombre: 'Bottom', propiedad: 'tapding-bottom'},
{ nombre: 'Izquierda', propiedad: 'acolchado-izquierda'}
],
}],
},{
nombre: 'Tipografía',
abierto: falso,
buildProps: ['familia-fuente', 'tamaño-fuente', 'peso-fuente', 'espaciado entre letras', 'color', 'altura de línea', 'alineación-texto', 'decoración-texto', 'sombra-texto'],
Propiedades:[
{ nombre: 'Fuente', propiedad: 'familia de fuentes'},
{ nombre: 'Weight', propiedad: 'font-weight'},
{ nombre: 'Color de fuente', propiedad: 'color'},
{
Propiedad: 'Alineación de texto',
Tipo: 'Radio',
valores por defecto: 'izquierda',
lista: [
{ valor : 'izquierda', nombre : 'Izquierda', claseNombre: 'fa fa-align-left'},
{ valor : 'centro', nombre : 'centro', nombreClase: 'fa fa-align-center' },
{ valor : 'derecha', nombre : 'Derecha', claseNombre: 'fa fa-align-right'},
{ valor : 'justificar', nombre : 'Justificar', claseNombre: 'fa fa-align-justify'}
],
},{
propiedad: 'decoración de texto',
Tipo: 'Radio',
Valores predeterminados: 'ninguno',
lista: [
{ valor: 'ninguno', nombre: 'Ninguno', claseNombre: 'fa fa-times'},
{ valor: 'subrayado', nombre: 'subrayado', claseNombre: 'fa fa-subrayado' },
{ valor: 'line-through', nombre: 'Line-through', className: 'fa fa-strikethrough'}
],
},{
propiedad: 'sombra de texto',
Propiedades: [
{ nombre: 'posición X', propiedad: 'text-shadow-h'},
{ nombre: 'Y posición', propiedad: 'text-shadow-v'},
{ nombre: 'Desenfoque', propiedad: 'texto-sombra-desenfoque'},
{ nombre: 'Color', propiedad: 'color-sombra-texto'}
],
}],
},{
nombre: 'Decoraciones',
abierto: falso,
buildProps: ['opacidad', 'radio de frontera', 'borde', 'sombra de caja', 'fondo', 'color de fondo',],
Propiedades: [{
Tipo: 'Deslizador',
propiedad: 'opacidad',
Valores por defecto: 1,
escalón: 0,01,
máximo: 1,
min:0,
},{
propiedad: 'radio de frontera',
Propiedades : [
{ nombre: 'Top', propiedad: 'borde-arriba-izquierda-radio'},
{ nombre: 'Derecha', propiedad: 'frontera arriba-derecha-radio'},
{ nombre: 'Bottom', propiedad: 'border-bottom-left-radius'},
{ nombre: 'izquierda', propiedad: 'frontera-abajo-derecha-radio'}
],
},{
propiedad: 'sombra de caja',
Propiedades: [
{ nombre: 'X posición', propiedad: 'caja-sombra-h'},
{ nombre: 'Y posición', propiedad: 'box-shadow-v'},
{ nombre: 'Blur', propiedad: 'box-shadow-blur'},
{ nombre: 'Spread', propiedad: 'box-shadow-spread'},
{ nombre: 'Color', propiedad: 'color-sombra-caja'},
{ nombre: 'tipo sombra', propiedad: 'tipo sombra caja'}
],
},],
},{
nombre: 'Extra',
abierto: falso,
buildProps: ['transición', 'perspectiva', 'transformación'],
Propiedades: [{
Propiedad: 'transición',
Propiedades:[
{ nombre: 'Propiedad', propiedad: 'transición-propiedad'},
{ nombre: 'Duración', propiedad: 'duración de transición'},
{ nombre: 'Relax', propiedad: 'función-temporal de transición'}
],
},{
Propiedad: 'transformar',
Propiedades:[
{ nombre: 'Rotar X', propiedad: 'transformar-rotar-x'},
{ nombre: 'Rotate Y', propiedad: 'transform-rotate-y'},
{ nombre: 'Rotar Z', propiedad: 'transformar-rotar-z'},
{ nombre: 'Escala X', propiedad: 'transformar-escala-x'},
{ nombre: 'Escala Y', propiedad: 'transform-scale-y'},
{ nombre: 'Escala Z', propiedad: 'transform-escala-z'}
],
}]
},{
nombre: 'Flex',
abierto: falso,
Propiedades: [{
nombre: 'Flex Container',
Propiedad: 'Display',
tipo: 'select',
valores predeterminados: 'bloquear',
lista: [
{ valor: 'bloquear', nombre: 'Desactivar'},
{ valor: 'flex', nombre: 'Enable'}
],
},{
nombre: 'Flex Parent',
Propiedad: 'etiqueta-padre-flexión',
tipo: 'entero',
},{
nombre: 'Dirección',
Propiedad: 'dirección flexible',
Tipo: 'Radio',
valores predeterminados: 'row',
lista : [{
valor: 'fila',
nombre: 'Row',
Nombreclase: 'iconos-flex icono-dir-row',
título: 'Row',
},{
valor : 'invertido por fila',
nombre: 'Reverso de fila',
claseNombre: 'icons-flex icon-dir-row-rev',
título: 'Reversa de fila',
},{
valor: 'columna',
nombre: 'Columna',
título: 'Columna',
claseNombre: 'icons-flex icon-dir-col',
},{
valor : 'reverso de columna',
nombre: 'reverso de columna',
título: 'reverso de columna',
Nombreclase: 'icons-flex icon-dir-col-rev',
}],
},{
nombre: 'Justificar',
propiedad: 'justificar-contenido',
Tipo: 'Radio',
Valores predeterminados: 'Arranque Flexible',
lista : [{
valor: 'flex-start',
claseNombre: 'iconos-flexión icono-acaba-empezar',
título: 'Start',
},{
valor : 'flex-end',
título: 'Fin',
Nombre de clase: 'iconos-flexión icono-solo-terminar',
},{
valor: 'espacio entre',
título: 'Espacio entre',
claseNombre: 'iconos-flex icono-solo-sp-apuesta',
},{
valor : 'espacio-alrededor',
título: 'Espacio alrededor',
claseNombre: 'iconos-flexión icono-justo-sp-ar',
},{
valor: 'centro',
título: 'Centro',
claseNombre: 'iconos-flexión icono-justo-sp-cent',
}],
},{
nombre: 'Align',
propiedad: 'alinear-ítems',
Tipo: 'Radio',
valores predeterminados: 'centro',
lista : [{
valor: 'flex-start',
título: 'Start',
Nombreclase: 'icons-flex icon-al-start',
},{
valor : 'flex-end',
título: 'Fin',
claseNombre: 'icons-flex icon-al-end',
},{
valor: 'estirarse',
título: 'Stretch',
Nombreclase: 'icons-flex icon-al-str',
},{
valor: 'centro',
título: 'Centro',
Nombreclase: 'icons-flex icon-al-center',
}],
},{
nombre: 'Flex Children',
Propiedad: 'etiqueta-padre-flexión',
tipo: 'entero',
},{
nombre: 'Orden',
Propiedad: 'orden',
tipo: 'entero',
Valores predeterminados: 0,
min: 0
},{
nombre: 'Flex',
propiedad: 'flex',
tipo: 'compuesto',
Propiedades : [{
nombre: 'Crece',
Propiedad: 'flex-grow',
tipo: 'entero',
Valores predeterminados: 0,
min: 0
},{
nombre: 'Shrink',
Propiedad: 'flex-shrink',
tipo: 'entero',
Valores predeterminados: 0,
min: 0
},{
nombre: 'Base',
Propiedad: 'Base flexible',
tipo: 'entero',
Unidades: ['px','%',''],
Unidad: '',
Valores predeterminados: 'Auto',
}],
},{
nombre: 'Align',
Propiedad: 'Alinear-se',
Tipo: 'Radio',
Valores predeterminados: 'Auto',
lista : [{
valor: 'auto',
nombre: 'Auto',
},{
valor: 'flex-start',
título: 'Start',
Nombreclase: 'icons-flex icon-al-start',
},{
valor : 'flex-end',
título: 'Fin',
claseNombre: 'icons-flex icon-al-end',
},{
valor: 'estirarse',
título: 'Stretch',
Nombreclase: 'icons-flex icon-al-str',
},{
valor: 'centro',
título: 'Centro',
Nombreclase: 'icons-flex icon-al-center',
}],
}],}
]`
### Resultado
'* { tamaño de caja: border-box; } cuerpo {margin: 0;}@media (ancho máximo: 100%){#i5f6{acolchonado:100px 0 1000px 0; pantalla: en línea; marje:1000px 0 0 8px;}}`Respuestas (1)
Gracias por informar de esto, @aliibrahim123.
Gracias por compartir tu informe sobre el gestor de estilo que no funciona (los estilos no tienen efecto). Para ayudar al equipo a investigar y priorizar esto:
Por favor, proporciona:
- Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
- Tu GrapesJS número de versión
- Información sobre navegador y sistema operativo
- Cualquier mensaje de error de la consola del navegador
- Pasos para reproducir el problema
Lo que más ayuda:
- Ejemplo de código mínimo (no tu proyecto completo)
- Grabación de pantalla o captura de pantalla que muestra el problema
- Comportamiento esperado frente a comportamiento real claramente indicado
- Configuración GrapesJS que estás usando
Con estos detalles, los mantenedores pueden identificar y priorizar una solución mucho más rápido. El equipo de GrapesJS responde muy bien a los problemas bien documentados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3642
Gestor de páginas múltiples reinicia el administrador de dispositivos
Hola, tengo un pequeño problema con el gestor de páginas. Quiero que todas las páginas tengan una resolución fija. Las cifras de altura y a...
Issue #3512
Los elementos hijos no se pueden arrastrar, se pueden soltar y se pueden resaltar. también el CSS de todos los elementos hijos que no se insertan en la sección de estilo mientras se desarrolla un componente banner en un plugin
Hola @artf, Estoy intentando desarrollar un plugin sencillo para banners que incluya un encabezado, un subtítulo y un enlace. y cada elemen...
Issue #3294
HAZAÑA: Añadir opciones al array de la lista de propiedades en el gestor de estilos
Hola, ¿Cómo puedo añadir buildProps a la lista de propiedades para que, cuando se seleccione una opción, se muestren las propiedades de esa...
Issue #3449
Cambiar de página llama a estilos y scripts de canvas una y otra vez
Hola Estoy integrando el gestor de páginas en mi proyecto. Pero el problema que tengo es que cada vez que cambio entre páginas, carga archi...
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.