Issue #1526✓ ResueltoAbierto el 18 de octubre de 2018por gasserolReacciones 2

Cómo hacer un comando a pantalla completa

Respuesta rápidapor electrotype2

@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)

👍 Muy útilelectrotype1 de enero de 2020

@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.

artf19 de octubre de 2018

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

gabjdev4 de mayo de 2019

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.

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.