Con la opción de analizador keepEmptyTextNodes activada, un bloque arrastrado se suelta por encima de la posición objetivo
Vale, el problema creo que está en el Sorter, no cuenta los nodos 'textnode' como hijos (con 'keepEmptyTextNodes' los mantienes todos)
Lee la respuesta completa abajo ↓Pregunta
Hola @artf,
Siguiendo tu consejo para activar la opción "keepEmptyTextNodes" en el analizador para solucionar mi problema del #1915 (grapesjs despojándose entre etiquetas), encontramos el siguiente efecto secundario (raro), usando la última versión 0.14.57:
Con esta opción activada, al arrastrar y soltar algunos bloques en una estructura HTML determinada (principalmente tabla>tr>td), el bloque arrastrado se deja caer POR ENCIMA de la posición objetivo, no donde lo dejaste.
Reproduje esto en la demo online, configurando la opción en tiempo de ejecución usando la consola de JavaScript, de la siguiente manera: 'grapesjs.editors[0]. Parser.getConfig().keepEmptyTextNodes = true'
Y usando el siguiente código HTML en el lienzo:
'<table align="center" border="0" celpadding="0" cells-spacing="0" width="680" style="box-sizing: border-box;"> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td style="box-sizing: border-box; addding: 10px 0 10px 0;"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="box-sizing: border-box; border-collapse: collapse; font-family: Roboto, Helvetica, Arial, sans-serif; margin-top: 5px;"><tbody style="box-sizing: border-box;" ><tr style="box-sizing: border-box;"><td width="100%" style="box-sizing: border-box; addding: 10px;"><div data-highlightable="1" style="box-sizing: border-box; addding: 5px;"><label></label> <label>TEXT</label> Texto Texto Texto TEXTO </div></td></tr></tbody></table></td></tr></tbody></table>'
Como puedes ver en la captura de pantalla de abajo:
- antes de activar esta opción, las etiquetas ' ' entre las <label>etiquetas '' se eliminan una vez que validas la ventana de Importar plantilla, pero el botón que dejo debajo del texto de mi muestra anterior está correctamente insertado donde quería
- después de activar la opción, reimportar el mismo código HTML ya no elimina el ' ', pero si dejo el botón exactamente en el mismo sitio que antes, el botón se coloca encima del texto, no debajo.
! keepEmptyTextNodes lleva a una mala posición del bloque
Supongo que esto tiene que ver con esa instrucción 'continue;' que se ejecuta en el código del analizador cuando la opción NO es verdadera, y que el código ubicado inmediatamente después (cuando keepEmptyTextNodes es verdadero) puede romper algo relacionado con el cálculo de la posición de caída de bloques... pero no he podido averiguarlo por mi cuenta.
¿Podrías decirme si podrías reproducir esto en tu lado y si podría ser fácil de arreglar o no? Necesitamos que esta opción keepEmptyTextNodes siga activada.
¡Gracias!
Respuestas (2)
Vale, el problema creo que está en el Sorter, no cuenta los nodos 'textnode' como hijos (con 'keepEmptyTextNodes' los mantienes todos)
Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1865
[Bug]: Las uvas cambian la posición de la página
Hola, Encontré el siguiente problema usando uvas dentro de una página html: Cuando haces clic en algunos elementos del editor, como la flec...
Issue #896
[BUG] Las reglas de consulta de medios son anuladas por las reglas de clase en el lienzo
Hola @artf, He notado un problema mientras probaba una de mis plantillas usando diferentes configuraciones de dispositivos que supuestament...
Issue #1421
[Bug]: clase "deshabilitada" en lugar de "activa" para la Vista de Botones del Panel
Hola Supongo que hay un error con la clase cuando el Botón del Panel está desactivado https://github.com/artf/grapesjs/blob/dev/src/panels/...
Issue #1290
[BUG]Establecer href para el bloque de enlace no editable una vez inicializado
El #1277 está cerrado pero el problema sigue existiendo, así que tengo que publicar como nuevo número Gracias por la ayuda de antes @maryia...
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.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.