Problemas con GrapesJS

Problemas analizados por 3,464 en GitHub 370 resuelto · 90 abierto. Busca, filtra y explora respuestas probadas en batalla.

Se han detectado problemas con 743

🔍 bug
#49005 de febrero de 2023por handhikadj2 respuestas
Reacciones 0

SetStyle/getCss() produce css duplicado

Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Última versión de ChromeEnlace de demo reproducible https://codesandbox.io/s/silent-river-ifczcvDescribe el bicho ¿Cómo reproducir el bicho?Visita el lugarVer consola. Presta atención al selector '' y 'body' Resultado esper...

artf

Se aplican estilos predeterminados que puedes desactivar fácilmente (pasar una cadena vacía) https://github.com/GrapesJS/grapesjs/blob/a83847b1b35e69e5a5810ccf1eb1e1384bf0aab1/src/editor/config/config.ts#L143-L147

ClaudeCode

Gracias por informar de esto, @handhikadj. Buena pregunta sobre setStyle/getCss() produce css duplicado. El enfoque recomendado con StyleManager es usar la API orientada a eventos. Empieza aquí: Consulta la documentación de GrapesJS de tu...

#48973 de febrero de 2023por rudacs4 respuestas
Reacciones 1

Component:styleUpdate / component:styleUpdate:propertyName no activado

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Edge 109.0.1518.70 Enlace de demo reproducible https://jsfiddle.net/rudacs/kr2x1mnh/ Describe el bicho ¿Cómo reproducir el bicho?Cambiar alguna propiedad en StyleManager.Cambiar la propiedad de ancho en el StyleManager. ¿...

artf

Oye, ¿@rudacs has probado en su lugar a usar 'style:property:update'?

rudacs

Este evento funcionó. ¿Se cambió por este? ¿Y para una sola propiedad? ¿Cómo puedo cambiar qué componente y propiedad había antes? Tranquilizantes.

SagarMaria

He venido aquí porque tengo el mismo problema. Usar la sugerencia 'style:property:update' parece funcionar, pero por alguna razón se dispara en cada clic. Además, ¿cómo podemos dirigir un cambio de propiedad de estilo concreto, es decir, '...

#486826 de enero de 2023por LukasSouza2 respuestas
Reacciones 1

Las cajas flotadas muestran desalineadas tras cambiar la posición del editor

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome 109.0.5414.87 Enlace de demo reproducible https://jsfiddle.net/o45ncveu/6/ Describe el bicho ¿Cómo reproducir el bicho?enlace de violín abiertoPasar el cursor sobre algunos componentes antes del tiempo de esperaesp...

artf

Desafortunadamente, esto es lo esperado, tienes que usar 'editor.refresh()' después de los cambios de diseño "externos".

ClaudeCode

Gracias por informar de esto, @LukasSouza. Los problemas de seguridad y dependencias son importantes. El equipo de GrapesJS trabaja activamente para mantener las dependencias actualizadas. Para ti ahora mismo: Ejecutar 'npm audit fix' para...

#486524 de enero de 2023por agreif2 respuestas
Reacciones 0

El valor de asignación de clase '@' del contenido del bloque cambia a signo '-' al usar literales plantilla

Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Firefox 108.0.2Enlace de demo reproducible No es posible en JSFIDDLEDescribe el bicho grapesjs-cli - 3.0.1 grapesjs - 0.20.3 ¿Cómo reproducir el bicho?añadir un newblock con este literal de plantilla con un atributo de clas...

artf

Actualizaré la función de escape, por ahora puedes proporcionar la tuya propia a través de esta opción

ClaudeCode

Gracias por informar de esto, @agreif. Buena pregunta sobre '@' valor de asignación de clase en el contenido del bloque que cambia a signo '-' al usar literales de plantilla. El enfoque recomendado con GrapesJS es usar la API orientada a e...

#486121 de enero de 2023por edenizk3 respuestas
Reacciones 1

<br/> se está sumando al texto de una sola línea, tras introducir espacio por primera vez en Firefox

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Firefox Enlace de demo reproducible https://jsfiddle.net/8rm5wv2y/1/ Describe el bicho ¿Cómo reproducir el bicho?Página de ejemplo abierta en Firefox (no tiene modificaciones)Haz clic en mostrar código, verás que no hay n...

artf

Desafortunadamente, esto no tiene que ver con grapesjs en sí, sino con cómo Firefox gestiona el texto editable. Supongo que una opción sería cambiar a un editor de texto enriquecido personalizado que no dependa del comportamiento nativo.

edenizk

Gracias por tu respuesta 🙂

ClaudeCode

Gracias por informar de esto, @edenizk. Buena pregunta sobre <br/> que se añade a texto de una sola línea, después de introducir espacio por primera vez en Firefox. El enfoque recomendado con ProseMirror es usar la API orientada a eventos....

#485920 de enero de 2023por zoilorys2 respuestas
Reacciones 0

Editar la propiedad CSS establece un estilo a una clase común en lugar de elemento

Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Chrome v108Enlace de demo reproducible https://grapesjs.com/demo.htmlDescribe el bicho ¿Cómo reproducir el bicho?Configurar el editor grapesjsImportar la siguiente plantilla https://pastebin.com/d9S2M0iSEn la parte inferior...

artf

Solo tienes que activar esta opción: https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors

ClaudeCode

Gracias por informar de esto, @zoilorys. Buena pregunta sobre Editar la propiedad CSS establece un estilo a una clase común en lugar de element. El enfoque recomendado con StyleManager es usar la API orientada a eventos. Empieza aquí: Cons...

#485519 de enero de 2023por ronaldohoch4 respuestas
Reacciones 1

El esquema desaparece tras aplicar loadProjectData

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión de Brave Enlace de demo reproducible https://grapesjs.com/demo Describe el bicho ¿Cómo reproducir el bicho?Abrir la página de demostraciónAbre las herramientas de desarrolloEjecutar: 'let projectData = editor.getP...

allenhwkim

@ronaldohoch con el navegador Edge, funciona con el comando que has dado. 'let projectData = editor.getProjectData();' 'Editor. DomComponents.clear();' 'editor.loadProjectData(projectData);' No creo que GrapesJS soporte el navegador Brave,...

ronaldohoch

También ejecuté el comando 'editor.runCommand("core:component-outline")' y no volvió a aparecer, tuve que hacer dos veces clic en el botón para que apareciera

ronaldohoch

Hola @allenhwkim, gracias por el comentario. Pero es vergonzoso que no lo haya probado en otros navegadores. Creo que mis clientes no usan Brave, así que voy a dejar esa parte. Sin embargo, haciendo todas estas pruebas, conseguí que funcio...

#485419 de enero de 2023por mnutt4 respuestas
Reacciones 1

Exportar 'default' no se encuentra en 'backbone' (el módulo no tiene exportaciones)

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Firefox 109 Enlace de demo reproducible ninguno Describe el bicho ¿Cómo reproducir el bicho? ¿Cuál es el comportamiento esperado? Comienza el servidor de desarrollo. ¿Cuál es el comportamiento actual? Estoy usando node v1...

mnutt

Sí, yo también puedo reproducirlo en 'grapesjs-style-filter', mismos tipos de errores.

mnutt

Pude evitar este error cambiando la pipeline de compilación para que generara javascript más moderno (vía '--targets="> 3%''), aunque eso genera errores de backbone debido al uso de clases es6.

artf

No puedo reproducir en mi lado con una instalación limpia, ¿estás usando la rama de desarrollo?

#485117 de enero de 2023por chaegumi3 respuestas
Reacciones 0

This.on('change:attributes:type', this.handleTypeChange) no soportan tipo de array

Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Chrome 108.0.5359.125Enlace de demo reproducible https://codesandbox.io/s/frosty-darkness-7po7xlDescribe el bicho ¿Cómo reproducir el bicho?usar myBlockHaz clic en el botón de prueba ¿Cuál es el comportamiento esperado? thi...

artf

Los oyentes no ven cambios profundos, así que en ese caso tienes que crear un nuevo array '''js component.set(this.traitName, [... this.items]); ```

chaegumi

Gracias @artf. Yo uso JSON.stringify y JSON.parse para gestionar mis datos.

ClaudeCode

Gracias por informar de esto, @chaegumi. Buena pregunta sobre this.on('change:attributes:type', this.handleTypeChange) no soportan tipos de array. El enfoque recomendado con Componentes es utilizar la API orientada a eventos. Empieza aquí:...

#484816 de enero de 2023por NicoGGG2 respuestas
Reacciones 1

El contenido de los componentes se establece en cadena vacía tras la edición en línea

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Firefox v91.4.1 Enlace de demo reproducible https://grapesjs.com/demo.html Describe el bicho ¿Cómo reproducir el bicho?Ve a la demo básica de grapesjs: https://grapesjs.com/demo.htmlDespejar el lienzoAñadir un enlace de c...

artf

Esto es de esperar debido a cierta lógica relacionada con el editor de texto enriquecido. Puedes usar 'component.getInnerHTML()' para obtener el HTML interno o 'component.components()' para obtener componentes internos.

ClaudeCode

Gracias por informar de esto, @NicoGGG. Buena pregunta sobre El contenido de componentes se configura como cadena vacía tras la edición en línea. El enfoque recomendado con Canvas es usar la API orientada a eventos. Empieza aquí: Consulta...

Explora todos los temas