Issue #1949💬 RespondidoAbierto el 8 de abril de 2019por arachnosoftReacciones 0

Con la opción de analizador keepEmptyTextNodes activada, un bloque arrastrado se suelta por encima de la posición objetivo

Respuesta rápidapor artf

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 '&nbsp' 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)

artf10 de abril de 2019

Vale, el problema creo que está en el Sorter, no cuenta los nodos 'textnode' como hijos (con 'keepEmptyTextNodes' los mantienes todos)

lock[bot]25 de abril de 2020

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.

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.