Opciones incorrectas de stylemanager la primera vez que se selecciona un componente/bloque
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)
Respuestas (3)
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});
Perdón por la respuesta tardía. Estoy trabajando en un violín para esto para que puedas replicarlo.
@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.
Issue #895
[Bug] El script de actualización no actualiza correctamente el script de componentes después de cargar automáticamente un componente desde html en localStorage
Estoy usando GrapesJS v0.14.5 en una copia local. SO: Ubuntu 16.04 LTS Navegador: Chrome Versión 64.0.3282.140 (Versión oficial) (64 bits)...
Issue #1906
Componentes y Js - Plantilla de carga
Hola, Tengo un componente al que se le conecta un JS. Todo se crea usando el JS. Cuando arrastro y suelto mi bloque por primera vez, el JS...
Issue #1535
[Bug]: Después de eliminar un componente personalizado, la vista del rasgo no se limpia
Hola, Estoy usando la biblioteca grapesjs versión 0.14.33. He creado algunos componentes personalizados y he notado que al eliminar los com...
Issue #2044
El desarrollo de npm en un servidor local no funcionó
Hice el procedimiento para iniciar el servidor local usando la rama 'dev' tal y como se describe en README, funcionó en la consola, pero fa...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.