Casi todos los ejemplos de esta página fallan con Grapejs
Después de mirar encontré este https://github.com/artf/grapesjs/issues/2873 de problema cerrado y, basándome en él, hice esto para permitir la casilla de verificación y la radio en modo previsualización: Y ahora al menos la casilla de selección/radio funciona en vista previa y algunas demos funcionan en 'vista previa'...
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 103.0.5060.134 (Versión oficial) Compilada en Ubuntu, ejecutándose en Ubuntu 18.04 (64 bits)
Enlace de demo reproducible
https://alvarotrigo.com/blog/html-css-tabs/
Describe el bicho
No cambiar/mostrar el contenido de las pestañas al probar ninguno de los ejemplos que he dado en https://alvarotrigo.com/blog/html-css-tabs/ Como esta "4. Pestañas HTML y CSS animadas" listas para importar que se muestran a continuación:
<body>
<div class="wrapper">
<div class="tabs">
<div class="tab">
<tipo de entrada="radio" nombre="css-tabs" id="tab-1" marcado clase="tabula-cambio">
<etiqueta for="tab-1" clase="tabula-etiqueta">Tab Uno</label>
<div class="tab-content">Mi padre tenía una pequeña finca en Nottinghamshire: yo era el tercero de cinco hijos. Me envió al Emanuel College de Cambridge cuando tenía catorce años, donde residí tres años y me dediqué a mis estudios; pero como me encargaba mantenerme, aunque tenía una pensión muy escasa, siendo demasiado grande para una fortuna limitada, fui aprendiz de Mr. James Bates, un eminente cirujano en Londres, con quien permanecí cuatro años. </div>
</div>
<div class="tab">
<tipo de entrada="radio" nombre="css-tabs" id="tab-2" clase="tabula-cambio">
<etiqueta for="tabula-2" clase="tabula-etiqueta">Pestaña Dos</label>
<div class="tab-content">Mi padre de vez en cuando me enviaba pequeñas sumas de dinero, las utilicé en aprender navegación y otras partes de las matemáticas, útiles para quienes pretendían viajar, como siempre creí que sería, en algún momento, mi fortuna para hacer. </div>
</div>
<div class="tab">
<tipo de entrada="radio" nombre="css-tabs" id="tab-3" clase="tabula-cambio">
<etiqueta for="tab-3" clase="tabula-etiqueta">Pestaña Tres</label>
<div class="tab-content">Cuando dejé al señor Bates, fui a casa de mi padre: donde, con la ayuda de él, de mi tío John y de otros parientes, conseguí cuarenta libras y la promesa de treinta libras al año para mantenerme en Leiden: allí estudié medicina dos años y siete meses, sabiendo que sería útil en largos viajes.</div>
</div>
</div>
<p>Ejemplo de línea fuera de la casilla de pestañas</p>
</div>
</body>
<style>
* {
Tamaño de caja: caja de borde;
}
cuerpo {
familia de fuentes: "Open Sans";
Antecedentes: #2c3e50;
color: #ecf0f1;
altura de línea: 1,618 m;
}
.wrapper {
Ancho máximo: 50rem;
ancho: 100%;
marje: 0 auto;
}
.tabs {
posición: relativa;
margen: 3rem 0;
Antecedentes: #1abc9c;
altura: 14,75 rem;
}
.tabs::antes,
.tabs::after {
contenido: "";
pantalla: tabla;
}
.tabs::after {
Claro: ambos;
}
.tab {
flotar: izquierda;
}
.tab-switch {
pantalla: ninguna;
}
.tab-label {
posición: relativa;
pantalla: bloqueo;
Altura de línea: 2,75 em;
altura: 3em;
relleno: 0 1.618em;
Antecedentes: #1abc9c;
frontera derecha: 0,125 rem sólidos #16a085;
color: #fff;
cursor: puntero;
arriba: 0;
transición: todos los 0,25s;
}
.tab-label:pasar el cursor {
top: -0,25rem;
transición: top 0,25s;
}
.tab-content {
altura: 12rem;
posición: absoluta;
Z-índice: 1;
Arriba: 2,75 em;
izquierda: 0;
relleno: 1.618rem;
Antecedentes: #fff;
color: #2c3e50;
borde inferior: 0,25 rem sólidos #bdc3c7;
opacidad: 0;
transición: todos los 0,35s;
}
.tab-switch:checked + .tab-label {
Antecedentes: #fff;
color: #2c3e50;
Límite último: 0;
frontera derecha: 0,125 rem sólidos #fff;
transición: todos los 0,35s;
Z-índice: 1;
arriba: -0,0625rem;
}
.tab-switch:verificado + etiqueta + .tabula-contenido {
Z-índice: 2;
opacidad: 1;
transición: todos los 0,35s;
}
</style>
Código de conducta
- Acepto seguir el Código de Conducta de este proyecto
Respuestas (3)
Después de mirar encontré este https://github.com/artf/grapesjs/issues/2873 de problema cerrado y, basándome en él, hice esto para permitir la casilla de verificación y la radio en modo previsualización:
var editor = grapesjs.init({
...
});
const checkClikcInPreview = function(e) {
si (!editor. Commands.isActive('preview')) {
e.preventDefault();
}
}
Sea ECT = editor. Components.getType('casilla de verificación');
ect.model.getDefaults().copyable = true;
ect.view.getEvents().click = checkClikcInPreview;
Y ahora al menos la casilla de selección/radio funciona en vista previa y algunas demos funcionan en 'vista previa'.
¡Sería genial que esta información estuviera incluida en la documentación!
Gracias @mingodad he lanzado una nueva versión del plugin de formulario y he añadido soporte para la vista previa.
Gracias por informar de esto, @mingodad.
El problema con casi todos los ejemplos de esta página que fallan con grapejs parece ser una condición de carrera o un problema de sincronización de 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 #4434
La forma del analizador CSS no permite definir la propiedad CSS más de una vez.
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? CualquieraEnlace de demo reproducible https...
Issue #5718
Posible problema con la ruta de actualización donde 'textnode' ahora se llama 'wrapper' desde la versión 0.18 hasta la > última
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome Versión 122.0.6261.95 (Versión ofi...
Issue #5450
La sección debería ser un problema que se solapa presente en las uvas js
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión 117.0.5938.134 (Versión oficial)...
Issue #4371
Todos los editores se rompieron tras la última actualización que rompió el administrador de almacenamiento.
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome Enlace de demo reproducible https:...
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.