¿Cómo personalizar los componentes de entrada de StyleManager?
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)
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.
Issue #2990
PREGUNTA: ¿Hay alguna forma de usar diferentes variantes del mismo estilo de propiedad?
Nota: Esto es en el contexto del Style Manager. ¿Hay alguna forma de usar diferentes variantes de la misma propiedad de estilo? Por ejemplo...
Issue #1608
[Pregunta] Personalizar el nombre de la clase CSS
El editor GrapesJs crea una clase única para Element y le añade reglas CSS. Por ejemplo, Ahora, ¿hay alguna forma de personalizar este comp...
Issue #1336
[Pregunta] ¿Puedo hacer que todo no se pueda seleccionar por defecto?
Actualmente, todos los componentes son seleccionables/flotables por defecto. Y si quieres, puedes cambiar ese comportamiento proporcionando...
Issue #2654
Cómo obtener la propiedad modificada desde StyleManager
Hola, ¿Hay alguna forma de saber qué propiedad se modificó en el StyleManager? Por ejemplo, Si selecciono un componente de texto y cambio s...
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.