La sección debería ser un problema que se solapa presente en las uvas js
@ChiragS-Prajapati tienes que usar propiedades de componentes arrastrables/soltables para controlar dónde se pueden arrastrar componentes y cuáles pueden dejarse caer dentro.
Lee la respuesta completa abajo ↓Pregunta
Versión GrapesJS
- Confirmo que se debe usar la última versión de GrapesJS
¿Qué navegador usas?
Versión 117.0.5938.134 (Versión oficial) (64 bits)
Enlace de demo reproducible
https://jsfiddle.net/ap404703/0e5zop1n/
Describe el bicho
Ejemplo como abajo
Archivo de uvas Js :-
Inicializar GrapesJS const editor = grapesjs.init({ lienzo: { Estilos: [ "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", "https://unpkg.com/swiper@7/swiper-bundle.min.css" ] }, styleManager: { // Configurar el Style Manager clearProperties: 1, }, blockManager: { appendTo: "#block", }, paneles: { predeterminados: [] }, Contenedor: '#grapesjs-contenedor', fromElement: true, // Pass true para cargar el HTML inicial desde el contenedor storageManager: { Configurar el plugin de almacenamiento local autoload: true, // Carga automáticamente los datos desde el almacenamiento local al inicializar el editor autosave: false, // Guardar automáticamente los datos en almacenamiento local tipo: "local", // Usar almacenamiento local como tipo de almacenamiento
stepsBeforeSave: 1, // Número de pasos/acciones antes de guardar en el almacenamiento local
}, // Puedes configurar opciones de almacenamiento según lo necesites
plugins: ['grapesjs-preset-webpage'], // Incluye cualquier plugin adicional que necesites
});
editor. BlockManager.add('navigations-center-block', {
etiqueta: 'Centro de Navegación',
Contenido:'<clase de sección="W-full H-96 Flex Justificify-Center Elements-Center"><Clase del botón="W-44 H-12 Redondeado BG-Blue-700 Pasar el cursor:BG-Blue-900 texto-Texto-Blanco-[10px] ">Contáctanos 1</button></section>'
});
editor. BlockManager.add('navigations-left-block', {
etiqueta: 'Navegaciones a la izquierda',
Contenido:'<clase de sección="W-H-96 Completo Flex-Justificify-Center Elementos-Centro"><Clase de botón="W-44 H-12 Redondeado BG-Blue-700 Pasar el cursor:BG-Blue-900 texto-Texto-Blanco-[10px] ">Contáctanos 2</button></section>'
});
Como se indica a continuación en el archivo HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta nombre="viewport" content="width=device-width, initial-scale=1.0">
<title>Business Press</title>
<!-- Incluye la familia de fuentes -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<enlace href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap" rel="hoja de estilo">
<link rel="stylesheet" href="styles.css" />
<enlace href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="hoja de estilo">
<enlace href="https://cdn.jsdelivr.net/npm/grapesjs@latest/dist/css/grapes.min.css" rel="hoja de estilo">
<script src="https://cdn.tailwindcss.com"></script>
<script src="js/tailwind.config.js"></script>
</head>
<body>
<div class="c-h-pantalla completa">
<div id="block"></div>
<div class="border w-2/4 h-2/4" id="grapesjs-container"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/grapesjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/grapesjs-preset-webpage@latest"></script>
<script src="grapes.js"></script>
</body>
</html>
CSS como se indica a continuación
/* styles.css */
/* Estilos personalizados */
.gjs-editor-cont .gjs-cv-canvas {
ancho: 100%;
}
.gjs-editor-cont .gjs-pn-panels {
Pantalla: ¡ninguna importante!
}
.gjs-editor-cont .gjs-one-bg {
Antecedentes: ¡ninguno! importante;
}
.gjs-blocks-cs {
Antecedentes: ¡ninguno! importante;
}
.gjs-blocks-cs .gjs-one-bg {
Antecedentes: ¡ninguno! importante;
}
.gjs-two-color {
color: #000 !importante;
}
.gjs-blocks-cs .gjs-blocks-c .gjs-block {
Altura mínima: 0 ¡importante;
}
Ahora, cuando el usuario selecciona la sección de botones "Contáctanos 1" y arrastra y suelta en el editor de uvas JS, funciona perfectamente, pero la segunda vez el usuario selecciona la sección de botones "Contáctanos 2" y arrastra y suelta dentro de la sección de botones "Contáctanos 1". Esto no debería haber pasado. La sección interior no debe colocarse.
### Código de conducta
- [x] Acepto seguir el Código de Conducta de este proyectoRespuestas (2)
@ChiragS-Prajapati tienes que usar propiedades de componentes arrastrables/soltables para controlar dónde se pueden arrastrar componentes y cuáles pueden dejarse caer dentro.
Gracias por informar de esto, @ChiragS-Prajapati.
El problema con Section debería ser un problema solapado presente en las uvas js parece ser una condición de carrera o un problema de sincronización de la gestión estatal. 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 #4097
mousePosFetcher en el listener de reizer config & change:style no funciona
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Brave V1.34.81 Enlace de demo reproducibl...
Issue #6365
El Style Manager no interpreta correctamente los selectores descendientes
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión de Chrome 131.0.6778.205 Enlace d...
Issue #5746
El desplazamiento de ColorPicker incorrecto cuando los paneles están fuera del contenedor del editor
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v122 Enlace de demo reproducible h...
Issue #4727
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Versión 107.0.5304.107 (Versión oficial) (6...
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.