Issue #2657💬 RespondidoAbierto el 16 de marzo de 2020por PodvodilaReacciones 0

La propiedad de estilo personalizado no funciona cuando se activa el atributo toRequire

Respuesta rápidapor Podvodila

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

  1. ¿Estás usando la última versión (las versiones anteriores NO están soportadas)? Sí
  2. ¿Cuál es el comportamiento esperado? Propiedad de estilo personalizado aplicable al componente
  3. ¿Qué ocurre en cambio? La propiedad de estilo personalizado no funciona
  4. 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)

Podvodila18 de marzo de 2020
Fragmento de códigoTEXT
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/
Podvodila18 de marzo de 2020
Fragmento de códigoTEXT
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)
artf3 de abril de 2020

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.

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 →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.