La propiedad de estilo personalizado no funciona cuando se activa el atributo toRequire
Conseguí arreglarlo extendiendo el método 'isTargetStylable' dentro de PropertyView.js - https://github.com/artf/grapesjs/blob/85b7b82103e12fb01a3700b1002a57a7b60ccaf1/src/style_manager/view/PropertyView.js#L504-510 He cambiado estosi (toRequire) { estilable = !objetivo || (stylableReq & & (stylableReq.indexOf(id) >=...
Lee la respuesta completa abajo ↓Pregunta
- ¿Estás usando la última versión (las versiones anteriores NO están soportadas)? Sí
- ¿Cuál es el comportamiento esperado? Propiedad de estilo personalizado aplicable al componente
- ¿Qué ocurre en cambio? La propiedad de estilo personalizado no funciona
- Pasos para reproducirse
- seleccionar el componente Caja
- intentar cambiar la propiedad de estilo Ancho de caja (en la pestaña Personalizado) ! imagen
Cuando añado la propiedad de estilo personalizado (flex) con el parámetro 'toRequire: 1', entonces el estilo personalizado no funciona. Cuando marco como Requiere como 0, entonces escribo el trabajo de propiedad de estilo como se espera.
JSFiddle con 'toRequire: 1' - https://jsfiddle.net/rjw7Lq93/1/ JSFiddle con 'toRequire: 0' - https://jsfiddle.net/rjw7Lq93/2/
Respuestas (3)
Conseguí arreglarlo extendiendo el método 'isTargetStylable' dentro de PropertyView.js - https://github.com/artf/grapesjs/blob/85b7b82103e12fb01a3700b1002a57a7b60ccaf1/src/style_manager/view/PropertyView.js#L504-510
He cambiado esto
> si (toRequire) {
estilable =
!objetivo ||
(stylableReq & &
(stylableReq.indexOf(id) >= 0 || stylableReq.indexOf(property) >= 0));
}
con esto
> si (toRequire) {
estilable =
!objetivo ||
trg.cid === this.getTarget().cid ||
(stylableReq & &
(stylableReq.indexOf(id) >= 0 || stylableReq.indexOf(property) >= 0));
}
Parece que el parámetro 'objetivo' incorrecto aparece dentro del método al cambiar el estilo del componente
JSFiddle con PropertyView ampliado - https://jsfiddle.net/6zf03t9w/Fuera de arriba
No quiero crear otro tema, solo quiero decir que en el mismo método (isTargetStylable) sería mejor reemplazar la búsqueda de propiedad por id (según entiendo para los estilos incorporados, es igual que la propiedad) dentro de la verificación unstylable (y también stylable)
> si (_.isArray(unstylable)) {
stylable = unstylable.indexOf(property) < 0; } ->
> si (_.isArray(unstylable)) {
stylable = unstylable.indexOf(id) < 0;
}
Como tuve un problema al mostrar un estilo personalizado para un componente de la misma propiedad que el integrado. (en mi aplicación, el estilo incorporado debería mostrarse para algunos componentes y personalizado para otros)sería mejor reemplazar la búsqueda de propiedad por id (según entiendo de los estilos integrados, es igual que la propiedad) dentro de la marca no estilizable (además de estilizable)
¡Sí, totalmente correcto!
Sinceramente, yo uso la opción toRequire y nunca había visto este tipo de problema, así que no sé por qué me pasa esto. ¿Te importaría crear una imagen permanente con tus correcciones (quizá intente investigar mejor)?
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2276
[BUG] el oyente de 'change:style' no se activa
¿Estás usando la última versión (las versiones anteriores NO están soportadas)? Versión 0.15.8¿Cuál es el comportamiento esperado? El oyent...
Issue #2700
[Bug] Resultado del editor de pasar el cursor en TypeError: this[0].getAttribute no es una función
¿Estás usando la última versión (las versiones anteriores NO están soportadas)? Sí, usando la última versión v0.16.3. ¿Qué pasó? Actualizad...
Issue #2683
[BUG] Al cancelar Colorpicker, se estableció un valor incorrecto para el componente
¿Estás usando la última versión (las versiones antiguas NO están soportadas)? Sí.¿Te enfrentas al error con tu copia local de GrapesJS o co...
Issue #2921
BUG: El guardado automático no funciona en el gestor de estilos cuando las clases están deshabilitadas
Versión: 0.16.18 ¿Puedes reproducir el error de la demo? [x] Sí: https://jsfiddle.net/ju1a0onx/ ¿Cuál es el comportamiento esperado? El gua...
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.