Issue #1728💬 RespondidoAbierto el 14 de enero de 2019por arthuralmeidapReacciones 0

Opción de barra de herramientas de Block en la parte inferior.

Respuesta rápidapor artf

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)

artf16 de enero de 2019

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

arthuralmeidap17 de enero de 2019

@artf creé el PR #1730 para esto. ¡Échale un vistazo cuando puedas! ¡Gracias por vuestra ayuda, como siempre!

lock[bot]17 de enero 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.