Issue #871💬 RespondidoAbierto el 15 de febrero de 2018por chthomosReacciones 0

Opciones incorrectas de stylemanager la primera vez que se selecciona un componente/bloque

Respuesta rápidapor artf

Hola @chthomos y gracias por el problema, pero ¿puedes ofrecer una demostración en vivo de este error (por ejemplo, a través de jsfiddel)? Acabo de probar esto en la demo pública y funcionó como esperaba '''js editor.addComponents(' <div style="color:red; relleno: 50px 100px" data-gjs-stylable='["width"]'> Texto ',</d...

Lee la respuesta completa abajo ↓

Pregunta

Hola,

He notado el siguiente comportamiento con errores en el gestor de estilos:

  • Usando una copia local de GrapesJS (ver 0.14.5). Probado en Chrome y Firefox tanto en Win10 como en OSX

  • GrapesJS se inicializa y los componentes se cargan a través de loadComponents. (por ejemplo, aquí está el JSON que usé en la demo, donde cargo un componente de imagen '[{"tagName":"img","type":"image","name"""", "removable":true,"arrastrable":true,"droppable":true,"badgable":true,"stylable":["width","height","align","addding","addding","addding-top","addding-left","addding-right","addding-bottom"],"stylable-require":","unstylable":"","resaltable":0,"copiable":true,"redimensionable":false,"editable":true,"selectable":true,"hoverable":true,"void":true,"states":true,"state"status":"selected","content":"","icon":"," style":{},"attributes":{},"classes":[{"name":"mc-component","label":"mc-component","type":1,"active":true,"private":false,"protected":false},{"name":"mc-image","label":"mc-image","type":1,"active":true,"private":false,"protected":false},{"name":"mc-image-ofdstkjfe","label":"mc-image-ofdstkjfe","type":1,"active":true,"private":false,"protected":false},"script":""traces":[{{"type":"imagesrc","label":"Image","name":"src","min":","max":"unit":"" ,"step":1,"value":"http://cmsguide.info/application/files/7515/0342/6820/grapesjs.jpg","default":"","placeholder":"Rellenar una URL de imagen","changeProp":0,"options":[]}],"propagar":"","archivo":"","componentes":[]}]'

  • Cuando hago clic en el componente de imagen, el gestor de estilos muestra que no se deben presentar las categorías de estilo "General", "Dimensiones", "Tipografía", "Decoraciones", "Extra".

  • Después de eso, simplemente hago clic en otro componente (por ejemplo, el componente "Body" - envoltorio)

  • Vuelvo a hacer clic en el componente imagen y el gestor de estilos muestra solo "Dimensión", que es el comportamiento esperado.

Puedes verlo tú mismo en el gif animado adjunto (por favor, ignora la animación del gestor de estilos, esto se hace solo usando CSS)

! Problema de uva

Respuestas (3)

artf18 de febrero de 2018

Hola @chthomos y gracias por el problema, pero ¿puedes ofrecer una demostración en vivo de este error (por ejemplo, a través de jsfiddel)? Acabo de probar esto en la demo pública y funcionó como esperaba '''js editor.addComponents(' <div style="color:red; relleno: 50px 100px" data-gjs-stylable='["width"]'> Texto ',</div> {at: 0});

chthomos26 de febrero de 2018

Perdón por la respuesta tardía. Estoy trabajando en un violín para esto para que puedas replicarlo.

artf1 de marzo de 2018

@chthomos bien, cierro esto por ahora y vuelvo a abrir cuando el fiddle esté disponible

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.