ERROR: Error en la visualización de resaltado de bloques
Mira, en la última versión hemos añadido esta opción https://github.com/artf/grapesjs/blob/8822aa6c6e8ced09ad50f2c8392f1754d3a6ec8b/src/editor/config/config.js#L151-L157 Así que, al principio, asegúrate de no estar sirviendo una versión en caché de grapesjs desde tu navegador (ejecuta en devtools 'console.log(grapesjs...
Lee la respuesta completa abajo ↓Pregunta
Versión: 0.6.18
Puedes obtener la versión escribiendo 'grapesjs.version' en la consola
¿Puedes reproducir el error de la demo?
[ ] Sí [x] No
Creo que esto puede deberse a que la demo está en modo pantalla completa.
¿Cuál es el comportamiento esperado? Imagino que la ubicación de la barra de herramientas del Editor de Texto Enriquecido debería estar cerca del bloque de texto que se está editando. Además, hacer doble clic en el objeto de texto no siempre activa la barra de herramientas RTE.
Describe el error detallado Esto solo parece ocurrir cuando el Editor NO está en modo pantalla completa. Cuando está en una ventana estándar del navegador que se puede desplazar, parece que la ubicación del RTE puede o puede estar sujeta a errores de cálculo según la posición de desplazamiento de la ventana. Además, hacer doble clic en un bloque de texto no siempre muestra la barra de herramientas RTE.
Actualización: Al principio pensé que solo estaba relacionado con la ubicación en RTE. Pero parece, como mencioné en mi último comentario, que ocurre con los bloques de contenido al resaltar o seleccionarlos SI el editor de uvas NO está en modo pantalla completa y la parte superior de la ubicación del editor no está en la parte superior del viewport. He adjuntado un screencast en un archivo zip en mi último comentario en este hilo.
¿Puedes adjuntar capturas de pantalla, screencasts o una demo en directo?
[x] Sí (adjuntar) [ ] No
<img width="1741" alt="Captura de pantalla 2020-10-06 a las 7 59 54 AM" src="https://user-images.githubusercontent.com/3180594/95199786-63cb4500-07ab-11eb-9b11-41db211fa54f.png">Respuestas (3)
Mira, en la última versión hemos añadido esta opción https://github.com/artf/grapesjs/blob/8822aa6c6e8ced09ad50f2c8392f1754d3a6ec8b/src/editor/config/config.js#L151-L157
Así que, al principio, asegúrate de no estar sirviendo una versión en caché de grapesjs desde tu navegador (ejecuta en devtools 'console.log(grapesjs.version)') y luego comprueba que tu panel desplazable sea el primer padre de tu '<div id="gjs-container">'. En caso de que el panel desplazable no sea el padre de tu contenedor grapesjs (que, por defecto, será escuchado), deberías poder pasarlo como una opción de 'listenToEl'
@artf Como tú, no podía reproducirme en un violín. Así que empecé a descomponer el HTML pieza a pieza hasta que descubrí que uno de los contenedores principales del sitio tenía un 'overflow-x: hidden;' definido en la clase y por alguna razón que parecía estar complicando el resaltado de GrapesJS y la colocación en la barra de herramientas. Corregí ese problema y eso, además de actualizar la última versión y asignar la propiedad 'listenToEl', lo solucionó todo. Realmente fue el 'overflow-x: hidden' en la raíz de 'div' lo que parecía causar el problema.
Muchas gracias por tu tiempo y esfuerzo ayudándome a desenterrar este problema.
@HeyWrecker He visto algo similar cuando no se selecciona ningún dispositivo o el lienzo es manipulado por JS externo. ¿Podrías comprobar el dispositivo seleccionado actualmente usando:
https://grapesjs.com/docs/api/editor.html#getdevice '''js editor.getDevice();
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3027
BUG: Administrador de recursos de imágenes, al eliminar no se puede volver a subir la misma imagen que se eliminó
¿Puedes reproducir el error de la demo? No, en el gestor de recursos de imágenes de la demo no hay opción para eliminar imágenes. ¿Cuál es...
Issue #3352
El contenido predeterminado se inserta mientras se usa setComponents si el cuerpo de etiquetas está vacío
Versión: Última Puedes obtener la versión escribiendo 'grapesjs.version' en la consola ¿Puedes reproducir el error de la demo?[X] Sí[ ] No...
Issue #3693
AdoptStylesheet no soportado en grapesJS
Versión: Puedes obtener la versión escribiendo 'grapesjs.version' en la consola 0.17.22 ¿Puedes reproducir el error de la demo?[x] Sí[ ] No...
Issue #3475
Los botones de barra de herramientas o de acción no funcionan cuando hay varias instancias presentes (incluso en tu demo).
Versión: 0.16.44 Puedes obtener la versión escribiendo 'grapesjs.version' en la consola ¿Puedes reproducir el error de la demo?[x] Sí[ ] No...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.