Issue #2296✓ ResueltoAbierto el 26 de septiembre de 2019por hellocaioReacciones 3

¿Cómo personalizar los componentes de entrada de StyleManager?

Respuesta rápidapor artf3

La versión demo en el sitio de GrapesJS tiene algunos componentes de entrada de estilo personalizado (por ejemplo, control deslizante de opacidad, botón de "deshacer" junto al nombre de la propiedad...) ¿Cómo se consigue esto? ¿Hay alguna forma de usarlos con mi propio plugin? Eso forma parte de la configuración. Para...

Lee la respuesta completa abajo ↓

Pregunta

La versión demo en el sitio de GrapesJS tiene algunos componentes de entrada personalizados (por ejemplo, control deslizante de opacidad, botón "deshacer" junto al nombre de la propiedad...) ¿Cómo se consigue esto? ¿Hay alguna forma de usarlos con mi propio plugin?

¿Y cómo hago para que mis 'propiedades' de sectores personalizados se comporten como los 'buildProps'? En mi caso tengo que traducir todas las cuerdas, así que no puedo usar 'buildProps', pero los props personalizados no se comportan como los 'buildProps'. No están tomando el valor inicial del atributo components en 'component:selected' como sí lo hace buildProps, el selector de color no muestra 'onClick', etc.

Respuestas (1)

👍 Muy útilartf28 de septiembre de 2019

La versión demo en el sitio de GrapesJS tiene algunos componentes de entrada de estilo personalizado (por ejemplo, control deslizante de opacidad, botón de "deshacer" junto al nombre de la propiedad...) ¿Cómo se consigue esto? ¿Hay alguna forma de usarlos con mi propio plugin?

Eso forma parte de la configuración.

Para despejar una propiedad, utiliza esta opción '''js styleManager: { clearProperties: 1 },

La opacidad se construye usando el tipo 'deslizante', aquí está la parte de la fuente de la demo
https://github.com/artf/grapesjs/blob/53cfe888a0ee5d49c43cd4e3fa5daf0b55f8277c/demo.html#L1101-L1108

> ¿Y cómo hago para que mis propiedades de sectores personalizados se comporten como los buildProps? En mi caso tengo que traducir todas las cadenas, así que no puedo usar buildProps, pero los props personalizados no se comportan como los buildProps. No están tomando el valor inicial del atributo components en component:selected como sí lo hace buildProps, el selector de color no muestra onClick y así sucesivamente.

Puedes traducir las cuerdas extendiendo 'buildProps'
Echa un vistazo a la fuente de la demo

https://github.com/artf/grapesjs/blob/53cfe888a0ee5d49c43cd4e3fa5daf0b55f8277c/demo.html#L1036-L1052

Como ves, cambio las etiquetas predeterminadas de propiedades como margin/padding extendiéndolas en 'propiedades' (usando 'property' o 'id' como identificador).
También puedes ver el 'flex-width', que es totalmente personalizado y colocado ahí solo para aprovechar 'buildProps' en otras propiedades integradas

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.