Opción de barra de herramientas de Block en la parte inferior.
Hola @arthuralmeidap creo que el #1434 habla del mismo problema. Sinceramente, ya he solucionado básicamente el mismo problema con la barra de herramientas RTE, así que supongo que, si tienes tiempo, podrías copiar/compartir la misma funcionalidad para la barra de herramientas del Componente. A continuación dejaré alg...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf
¿Cómo estás? Estoy teniendo un pequeño problema en GrapesJS y me gustaría conocer vuestra opinión sobre cuál es el mejor enfoque aquí. Mi problema es: cuando tengo un bloque pequeño, como un Link, colocado en la esquina superior izquierda del Canvas, la barra de herramientas cubre totalmente el bloque y no puedo verlo. Tendría que desseleccionar ese bloque para verlo de nuevo. ¿Cuál crees que es la mejor solución a este problema? Estaba pensando en crear una nueva opción para GrapesJS que permita al usuario seleccionar mostrar la barra de herramientas en la parte inferior o superior del bloque. Esto soluciona mi error pero introduce otro: cuando el bloque está en la parte inferior del lienzo tendría que mostrar la barra de herramientas en la parte superior esta vez. ¿Qué opinas? ¿Hay alguna posibilidad de que esta nueva opción se añada al código GrapesJS? ¿Tienes un enfoque mejor? ¡Por favor, decidme!
Respuestas (3)
Hola @arthuralmeidap creo que el #1434 habla del mismo problema. Sinceramente, ya he solucionado básicamente el mismo problema con la barra de herramientas RTE, así que supongo que, si tienes tiempo, podrías copiar/compartir la misma funcionalidad para la barra de herramientas del Componente.
A continuación dejaré algunas pistas sobre la implementación actual en RTE: Actualmente, si activas el RTE, su barra de herramientas se colocará en la parte superior. Una vez alcanzado el borde superior del lienzo, la barra de herramientas se coloca debajo del componente. Reproducible en la demo Implementado aquí: https://github.com/artf/grapesjs/blob/8af686cb7fa66863c04b786ed1aa704e5406252e/src/rich_text_editor/index.js#L234-L253
Como puedes ver, también paso el evento 'rteToolbarPosUpdate' al método 'getTargetToElementDim', que permite personalizar la posición de forma extarna (ejemplo de uso en el plugin CKEditor: https://github.com/artf/grapesjs-plugin-ckeditor/blob/7c227de0b187da8cb7b1e22b3da34837659977d1/src/index.js#L110-L132)
El único problema con esta implementación es cuando tienes que lidiar con componentes grandes (por ejemplo, sección), que no son tan comunes en componentes de texto. Por ejemplo, cuando llegas al borde superior del lienzo pero al inferior del componente, sigue estando debajo del lienzo. Así que, en ese caso, podría ser bueno dejar la posición actual: https://github.com/artf/grapesjs/blob/8af686cb7fa66863c04b786ed1aa704e5406252e/src/commands/view/SelectComponent.js#L529-L544
@artf creé el PR #1730 para esto. ¡Échale un vistazo cuando puedas! ¡Gracias por vuestra ayuda, como siempre!
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 #554
Evita el iluminador flotante y evita seleccionar ciertos componentes
Hola @artf, Me gustaría conocer vuestra opinión sobre los siguientes dos puntos antes de enviar una solicitud de tirada. Son para cumplir l...
Issue #1987
[PREGUNTAS] Crear barra de herramientas en la parte inferior
¿Puedo crear una nueva barra de herramientas que esté situada en la parte inferior (como muestra el cursor) cuando selecciono el componente...
Issue #1683
¿Cómo cambiar el id/clase cuando aparece un nuevo elemento en el editor o renderizo un elemento con IP dinámica?
Hola @artf, Espero que estés bien. Tengo dos preguntas sobre la suma de bloques dinámicos, 1) ¿Es posible renderizar el bloque con id dinám...
Issue #1719
Evento mientras haces clic en la imagen desde el modal del recurso
Hola @artf, Espero que estés bien. Estoy trabajando en gestión de activos. Tengo un total de 5 imágenes como imagen predeterminada del gest...
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.