Issue #616💬 RespondidoAbierto el 7 de diciembre de 2017por ryandebaReacciones 0

Opciones del selector de color Expose spectrum

Respuesta rápidapor artf

¿Algo así ya es posible y me lo perdí? Si no, ¿considerarías fusionar una solicitud pull que añada esta funcionalidad? Por desgracia, aún no es posible, pero sin duda aceptaré una residencia permanente (vale la opción 'colorPicker'). El espectro se llama dentro de InputColor y luego se utiliza en PropertyColorView y T...

Lee la respuesta completa abajo ↓

Pregunta

Hola @artf,

Quiero personalizar algunas opciones para el selector de color de espectro (específicamente la paleta). He buscado en el código y no veo cómo es posible esto actualmente.

Esto es lo que me gustaría hacer:

grapesjs.init({
   ColorPicker: {
      mostrarPaleta: cierto,
      Paleta: [
        ['negro', 'blanco', 'almendra blanca'],
        ['RGB(255, 128, 0);', 'HSV 100 70 50', 'Amarillo claro']
      ]
    }
});

¿Algo así ya es posible y me lo he perdido? Si no, ¿considerarías fusionar una solicitud pull que añada esta funcionalidad?

Respuestas (3)

artf8 de diciembre de 2017

¿Algo así ya es posible y me lo perdí? Si no, ¿considerarías fusionar una solicitud pull que añada esta funcionalidad?

Por desgracia, aún no es posible, pero sin duda aceptaré una residencia permanente (vale la opción 'colorPicker'). El espectro se llama dentro de InputColor y luego se utiliza en PropertyColorView y TraitColorView

Pondría un comentario para no anular opciones predeterminadas como 'cambiar', 'mover', etc., porque eso lo rompería

ryandeba13 de diciembre de 2017

¡Gracias @artf! ¿Tienes alguna idea general sobre cómo hacer este cambio de la mejor manera? He revisado el código y no veo una forma fácil de lograrlo, y me gustaría evitar perder tiempo yendo por el camino equivocado.

Aquí tienes un resumen de las ideas que he considerado hasta ahora... ¿Alguno de estos suena mejor o peor que los demás?

  • Añadir ColorPicker al objeto utils
    • Esto facilitaría pasar la configuración así, utilizando la funcionalidad existente de loadModule: 'grapesjs.init({ utils: { colorPicker: { ... } } }); `
    • Creo que esto requeriría cambiar cómo los objetos InputColor/PropertyColorView/TraitColorView lo referencian; tendrían que pasar por 'editor. Utils.ColorPicker' en lugar de simplemente requerir la dependencia del archivo js. Ninguno de esos objetos parece tener actualmente referencia al objeto 'editor', así que esto no parece muy sencillo.
  • Mover el objeto ColorPicker para que sea un objeto editor de nivel superior (algo parecido al editor de texto enriquecido. RichTextEditor', pero esto sería 'editor. ColorPicker')
    • Supongo que aquí existen los mismos problemas que al mover ColorPicker al objeto utils... Todo el código de referencia tendría que acceder a esto a través de 'Editor. ColorPicker' en lugar de requerir la dependencia del archivo js...
  • Implementación de backbone/jQuery
    • Modificar 'Backbone.$.fn.spectrum.defaults' en el editor si la configuración 'colorPicker' se ha pasado a 'grapesjs.init', y modificar el ColorPicker para usar esos valores predeterminados si existen.
    • Esta solución me parece muy improvisada :(

Cualquier comentario que podáis dar sería muy agradecido :)

artf14 de diciembre de 2017

Sinceramente, estaba pensando en un enfoque menos invasivo

Ninguno de esos objetos parece tener actualmente referencia al objeto editor

De hecho, PropertyColorView inyecta 'EditorModel' (que suelo mencionar como 'em') como opción vía 'target' (probablemente lo mejor sea renombrarlo a 'them') pero no en TraitColorView (solución sencilla, solo hay que pasar 'this.config.em'). Después de tener los 'em' dentro, podemos actualizar fácilmente 'InputColor' así '''js colorEl.spectrum({ //... Paleta: [], ... this.target.getConfig('colorPicker'), // o this.em.getConfig... Necesitamos mover(), cambiar(), etc. para que la entrada de color funcione correctamente así que los mantendría fuera mover(color) {...}, //...


¿Qué opinas?

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.