Cómo hacer un comando a pantalla completa
@nativeer tuve el mismo problema. Mi solución es llamar a 'stopCommand' antes que a 'runCommand': Parece que me funciona.
Lee la respuesta completa abajo ↓Pregunta
Hola, lamentablemente no encuentro documentación y no consigo entenderla por código: Sé que hay un comando incorporado 'pantalla completa', pero con mi configuración (del tutorial) solo carga el canvas en pantalla completa, sin paneles. Aquí está mi código html:
<div class="ogaeditor">
<div class="panel__top">
<div class="panel__basic-actions"></div>
<div class="panel__devices"></div>
<div class="panel__switcher"></div>
</div>
<div class="editor-row">
<div class="editor-canvas">
<div id="gjs">
<h1>¡Hola Componente Mundial!</h1>
</div>
</div>
<div class="panel__right">
<div class="layers-container"></div>
<div class="styles-container"></div>
<div class="traits-container"></div>
<div id="blocks" class="blocks-container"></div>
</div>
</div>
</div>
Y aquí mi código de panel:
editor. Panels.addPanel({
id: 'Acciones-básicas',
EL: '.panel__basic-acciones',
botones: [
...
{
id: 'Lleno de exposición',
claseNombre: 'btn-show-full',
etiqueta: '<i class="fas fa-expand-flechas-alt">',
Contexto: 'lleno de espectáculos',
id: ful,
Orden: 'Configurar-pantalla completa',
comando: 'pantalla completa', // Comando incorporado
},
{
id: 'deshacer la muestra',
claseNombre: 'btn-show-undo',
etiqueta: '<i class="fas fa-undo">',
Contexto: 'mostrar deshacer',
comando(editor) {
const um = editor. UndoManager;
um.undo();
},
},
{
id: 'mostrar de nuevo',
claseNombre: 'btn-show-redo',
etiqueta: '<i class="fas fa-redo">',
Contexto: 'show-reto',
comando(editor) {
const um = editor. UndoManager;
um.redo();
},
},
],
});
¿Alguien puede ponerme en el camino correcto? ¡Muchas gracias por tu valiosa ayuda y un saludo cordial!
Respuestas (3)
@nativeer tuve el mismo problema. Mi solución es llamar a 'stopCommand' antes que a 'runCommand':
editor.stopCommand('pantalla completa');
editor.runCommand('fullscreen', { objetivo: '#something' });
Parece que me funciona.
Buen punto, el comando por defecto Fullscreen activa la pantalla completa en el contenedor ('#gjs'), pero con paneles externos esto obviamente no funciona, y por eso solo ves el lienzo. Agradecería mucho un récord permanente para una nueva opción que me permitiera hacer algo así: '''js de Orden: 'Pantalla completa', a comando: editor => editor.runCommand('fullscreen', { objetivo: '.ogaeditor' }), El objetivo puede ser una cadena selectora o cualquier HTMLElement
Hola @artf, El código anterior funcionaba en pantalla completa, pero después de salir de pantalla completa manualmente, ya no funciona. ¿Podrías poner código para salir de pantalla completa con el mismo botón?
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2592
Ancho modal
Hola, ¿hay alguna forma de establecer el ancho de un modal? Actualmente está configurado a 850px por CSS, pero me gustaría crear un diálogo...
Issue #563
Tabla <thead> y <tbody> etiqueta se omiten
Hola, Hay un nuevo problema con GrapesJS (quizá). He creado un nuevo componente usando 'bm.add()' en el que he usado un elemento de tabla c...
Issue #1368
Redimensionar el lienzo
¿Hay alguna forma de que el lienzo redimensione de forma dinámica? es decir, no usar el Administrador de dispositivos, sino arrastrar y sol...
Issue #2355
[requisición] ¿Soporte para reglas en modo diseñador?
Sé que hay un hilo antiguo que sugiere el soporte para los Gobernantes (pero ya está cerrado). Solo me pregunto si hay alguna posibilidad d...
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.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.