Issue #373💬 RespondidoAbierto el 4 de octubre de 2017por sonnylloydReacciones 0

La entrada de color no actualiza el elemento en la página

Respuesta rápidapor sonnylloyd

@art creo que el problema aquí es que dentro de la función setValue(val, opts = {}) de InputColor.js no llama al evento de cambio dentro del espectro. Parece que hay que separarlo.

Lee la respuesta completa abajo ↓

Pregunta

Cuando uso el selector de color, todo funciona bien.

Sin embargo, si añades un valor hex a la entrada y pulsas Enter, la vista previa de color se actualiza pero el color no se aplica al elemento de la página

Respuestas (3)

sonnylloyd4 de octubre de 2017

@art creo que el problema aquí es que

colorEl.spectrum('set', valueClr);

dentro de la función setValue(val, opts = {}) de InputColor.js no llama al evento de cambio dentro del espectro. Parece que hay que separarlo.

sonnylloyd5 de octubre de 2017

@artf he estado mirando esto bastante y he conseguido que funcione, pero la forma en que lo he hecho me parece un poco improvisada.

El problema que encontré fue dentro de src\domain_abstract\ui\InputColor.js dentro de setValue(val, opts = {}).

el valor opts.targetUpdate no está definido tras el segundo bucle.

Añadí estos, justo encima de la sentencia IF, y cambié la variable previousСolor para que todas las funciones puedan acceder a ella.

model.set('value', valueClr);
colorEl.spectrum('set', valueClr);

if (opts.targetUpdate) {
      self.previousСolor = valueClr;
      this.noneColor = valueClr;
}

De nuevo, esto me parece un poco forzado, no estoy seguro de si es el enfoque correcto.

artf5 de octubre de 2017

@sonnylloyd en realidad el verdadero problema está aquí https://github.com/artf/grapesjs/blob/dev/src/domain_abstract/ui/Input.js#L24-L27

Debería ser: '''js handleChange(e) { e.stopPropagation(); this.model.set('value', this.getInputEl().value); this.elementUpdated(); },

Ya he hecho este cambio en el último RC, puedes verlo funcionar aquí
http://grapesjs.com/demo-no-jq.html

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.