La caja redimensionable desaparece al volver a seleccionar componentes
Antes, necesitaba ser más claro sobre los pasos para reproducir el problema. Aquí están los pasos más precisos para resolver el problema. Pasos para reproducir el problema:Haz clic directamente en la sección.Observa las opciones de tamaño que se muestran.Haz clic en un área dentro de la sección donde haya un component...
Lee la respuesta completa abajo ↓Pregunta
Versión GrapesJS
- Confirmo que se debe usar la última versión de GrapesJS
¿Qué navegador usas?
Chrome
Enlace de demo reproducible
https://jsfiddle.net/kanaihyakumar/oedg76nt/
Describe el bicho
Descripción
Al seleccionar cualquier componente del lienzo, se resalta la caja inferior de redimensionamiento según la configuración. Sin embargo, al volver a hacer clic en el mismo componente, desaparece la casilla de redimensionamiento.
Pasos para reproducirse
- Abre GrapesJS con el código HTML proporcionado.
- Selecciona cualquier componente del lienzo para ver la caja inferior de redimensionamiento.
- Haz clic en el mismo componente otra vez.
- Observa que la caja de redimensionamiento desaparece.
Comportamiento esperado
La casilla inferior de redimensionamiento debería permanecer visible incluso después de volver a seleccionar el mismo componente.
### Comportamiento real
La caja inferior de redimensionamiento desaparece tras volver a seleccionar el mismo componente.
### Código
'''html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta nombre="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.12/css/grapes.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.12/grapes.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<style>
html,
cuerpo {
marje: 0;
relleno: 0;
}
</style>
</head>
<body>
<main>
<div id="gjs"></div>
</main>
<script>
const htmlContent = '
<style>
.banner {
Altura: 480px;
color: #ffffff;
}
.banner__container {
Acolchado superior: 6%;
relleno-izquierda: 15%;
Acolchado-fondo: 10%;
}
.banner__headline {
familia de fuentes: Figtree;
}
@media (max-width:767px) {
.banner {
Altura: 350px;
}
.banner__container {
relleno-izquierda: 5%;
}
}
@media (max-width:480px) {
.banner {
Altura: 250px;
}
}
</style>
<section class="banner attribute" style="background-image: linear-gradient(#023f8080, #023f8080), url(https://images.pexels.com/photos/27308359/pexels-photo-27308359/free-photo-of-pigeons-on-a-tree.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1); background-position: superior izquierda; background-size: cover; background-repeat: no-repeat;">
<div class="banner__container columna container-fluid">
<h2 class="banner__headline mb-4 fs-1">Los pájaros son el ojo de alguien especial</h2>
<a class="banner__button btn button-variable px-5 py-1" role="button">Click</a>
</div>
</section>
`;
const editor = grapesjs.init({
Contenedor: '#gjs',
fromElement: cierto,
Altura: '100VH',
Ancho: 'Auto',
Plugins: ['GJS-Bloques-Básico'],
storageManager: false,
});
editor. DomComponents.addType('section', {
isComponent: el => el.tagName === 'SECTION',
modelo: {
Predeterminados: {
etiquetaNombre: 'SECTION',
arrastrable: 'principal',
Droppable: falso,
resaltable: falso,
nombre: 'Section',
dmode: '',
redimensionable: {
Resumen: 0,
TC: 0,
TR: 0,
CR: 0,
CL: 0,
BL: 0,
BC: 1,
BR: 0
}
}
}
});
editor. DomComponents.addType('column', {
extender: 'por defecto',
isComponent: el => el.classList && el.classList.contains("column"),
modelo: {
Predeterminados: {
etiquetaNombre: 'DIV',
arrastrable: falso,
Droppable: Cierto,
Atributos: {},
nombre: 'Columna',
Editable: Cierto,
Hoverable: falso,
seleccionable: false,
capas: falso,
resaltable: falso,
Removible: falso
}
},
});
const mainComponent = editor.setComponents(htmlContent);
sea sectionComponent = editor.getComponents().models[0];
editor.on('component:selected', (component) => {
const selected = editor.getSelected();
si (seleccionado) {
selected.set({
Arrastrable: Cierto,
Droppable: Cierto,
redimensionable: {
Resumen: 0,
TC: 0,
TR: 0,
CL: 0,
CR: 0,
BL: 0,
BC: 1,
br: 0,
},
});
}
});
</script>
</body>
</html>
### Código de conducta
- [X] Acepto seguir el Código de Conducta de este proyectoRespuestas (4)
Antes, necesitaba ser más claro sobre los pasos para reproducir el problema. Aquí están los pasos más precisos para resolver el problema.
Pasos para reproducir el problema:
- Haz clic directamente en la sección.
- Observa las opciones de tamaño que se muestran.
- Haz clic en un área dentro de la sección donde haya un componente de columna (he añadido un borde a todos los elementos del vídeo proporcionado para mayor claridad). Observa que el componente de sección está seleccionado pero la opción inferior redimensionable no se muestra. Enlace al vídeo
Comportamiento real:
- Al hacer clic directamente en la sección, las opciones redimensionables inferiores se muestran como se espera.
- Sin embargo, al hacer clic en un área donde hay un componente de columna, se selecciona la sección pero no se muestran las opciones redimensionables inferiores.
Comportamiento esperado:
Al hacer clic en cualquier parte dentro de la sección, si el punto de clic no incluye ningún componente seleccionable, la sección debe estar seleccionada y mostrar las opciones redimensionables inferiores.
Créeme, tuve suerte de poder encontrar este comportamiento trágico de hacer clic en diferentes lugares dentro de la sección que se comportaba pero era diferente.
No veo que desaparezca si no es al pulsar el clic, pero eso es de esperar cuando se prepara para arrastrarse
Gracias por informar de esto, @kanaihyakumar.
El problema con Desaparece la caja redimensionable al reseleccionar componentes parece ser una condición de carrera o un problema de sincronización de gestión de estado. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.
Qué probar:
- Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);
2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos
3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
Es seguro interactuar con el componente aquí
});
Recomendaciones de siguientes pasos:
- Prueba con la última versión de GrapesJS si no lo has hecho
- Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
- Incluir errores de GrapesJS, de navegador y de consola en tu informe
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #5990
Cuando eliminas un componente, las clases duplicadas entre componentes se eliminan.
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome 126.0.6478.127 (Windows) Enlace de...
Issue #4576
Al hacer clic en 'envolver para estilo' afecta los componentes internos de otros componentes dentro del mismo cuadro de texto
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Chrome 104.0.5112.101 Enlace de demo reprod...
Issue #5319
Deshacer no actualiza la clase en el componente
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome V116.0.5845.96 Enlace de demo repr...
Issue #4350
El Gestor de Estilos no actualiza el segundo plano cuando se selecciona un componente
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Brave Browser V1.39.111 Enlace de demo re...
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.