Issue #1524💬 RespondidoAbierto el 17 de octubre de 2018por gasserolReacciones 0

¿Cómo añadir bloques?

Respuesta rápidapor gasserol

Encontré el problema, estaba cargando un archivo js incorrecto... Perdona.

Lee la respuesta completa abajo ↓

Pregunta

Hola a todos, me vuelve loco pero no entiendo cómo añadir bloques. Puedo escribirlos yo mismo siguiendo tutoriales, pero cuando cargo un plugin, como grapesjs-block-basic por ejemplo, los bloques no se muestran. Aquí está mi código:

var editor = grapesjs.init({
    Indica dónde iniciar el editor en el editor. También puedes aprobar un HTMLElement
    Contenedor: '#gjs',
    Consigue el contenido del lienzo directamente del elemento
    Como alternativa, podríamos usar: 'components: '<h1>¡Hello World Component!</h1>' `,
    fromElement: cierto,
    Tamaño del editor
    Altura: '90VH',
    Ancho: 'Auto',
    Desactiva el gestor de almacenamiento por el momento
    storageManager: {
        Tipo: nulo
        id: 'gjs-', // Identificador de prefijo que se usará dentro del almacenamiento y carga
        tipo: 'local', // Tipo de almacenamiento
        autosave: true, // Almacenar datos automáticamente
        autoload: true, // Autoload datos almacenados en init
        stepsBeforeSave: 1, // Si el autoguardado está activado, indica cuántos cambios son necesarios antes de que se active el método de almacenamiento
        storeComponents: true, // Activar/Desactivar el almacenamiento de componentes en formato JSON
        storeStyles: true, // Activar/Desactivar el almacenamiento de reglas en formato JSON
        storeHtml: true, // Activar/Desactivar el almacenamiento de componentes como cadena HTML
        storeCss: cierto,
    },

Plugins: ['GJS-bloques-flexbox', 'GJS-bloques-básico'],

pluginsOpts: {
        'gjs-blocks-flexbox': {
            Opciones
        },
        'gjs-blocks-basic': {
            Bloques: ['Columna1', 'Columna2', 'Columna3', 'Column3-7', 'Texto', 'Enlace', 'Imagen', 'Vídeo', 'Mapa']
        }
    },

Evita cualquier panel por defecto
    Paneles: {
        Valores por defecto: [
            {
                id: 'capas',
                EL: '.panel__right',
                Haz que el panel sea redimensionable
                redimensionable: {
                    maxDim: 350,
                    minDim: 200,
                    TC: 0, // Mejor manejador
                    cl: 1, // Manejador izquierdo
                    cr: 0, // Manejador derecho
                    bc: 0, // Manipulador de abajo
                    Siendo un hijo flexible, necesitamos cambiar la propiedad de 'flex-base'
                    en lugar del 'ancho' (por defecto)
                    keyWidth: 'flex-base',
                },
            },

{
                id: 'conmutador de panel',
                EL: '.panel__switcher',
                botones: [
                    {
                        id: 'capas de exhibición',
                        activo: falso,
                        etiqueta: 'Layers',
                        Orden: 'Mostrar capas',
                        Una vez activada, desactiva la posibilidad de desactivarlo
                        Activable: Cierto,
                    },
                    {
                        id: 'estilo de espectáculo',
                        activo: falso,
                        etiqueta: 'Styles',
                        Orden: 'Estilos de Exhibición',
                        Activable: Cierto,
                    },

{
                        id: 'bloques de exposición',
                        ACTIVO: Cierto,
                        etiqueta: 'Bloques',
                        Orden: 'Bloques de Exhibición',
                        Activable: Cierto,
                    },

//...
                ]
            },

{
                id: 'panel-dispositivos',
                EL: '.panel__devices',
                botones: [
                    {
                        id: 'dispositivo-escritorio',
                        etiqueta: '<i class="fas fa-escritorio"></i>',
                        comando: 'establecer-dispositivo-escritorio',
                        ACTIVO: Cierto,
                        Activable: falso,
                    },
                    {
                        id: 'dispositivo-tableta',
                        etiqueta: '<i class="fas fa-tablet-alt"></i>',
                        comando: 'establecer-dispositivo-tableta',
                        Activable: falso,
                    },
                    {
                        id: 'dispositivo-móvil',
                        etiqueta: '<i class="fas fa-mobile-alt"></i>',
                        comando: 'establecer-dispositivo-móvil',
                        Activable: falso,
                    }
                ],
            }
        ]
    },

blockManager: {
        appendTo: '#blocks',
        appender a: '.contenedor-bloques',
    },

layerManager: {
        appendTo: '.layers-container'
    },

selectorManager: {
        appendTo: '.estilos-contenedor'
    },

StyleManager: {
        append To: '.estilos-contenedor',
        Sectores: [
            {
                nombre: 'General',
                abierto: falso,
                buildProps: [
                    'flotar', 'pantalla', 'posición', 'arriba', 'derecha', 'izquierda', 'abajo'
                ]
            },
            {
                nombre: 'Dimension',
                abierto: falso,
                buildProps: [
                    'ancho', 'ancho flexible', 'altura', 'ancho máximo', 'altura mínima', 'margen', 'acolchado'
                ],
                Propiedades: [
                    {
                        id: 'flexibilidad-anchura',
                        tipo: 'entero',
                        nombre: 'Ancho',
                        Unidades: ['PX', '%'],
                        Propiedad: 'Base flexible',
                        Requerir: 1,
                    }
                ]
            },
            {
                nombre: 'Decoraciones',
                abierto: falso,
                buildProps: ['radio de borde-c', 'color de fondo', 'radio de borde', 'borde', 'sombra de caja', 'fondo'],
            },

// {
            nombre: 'Dimension',
            abierto: falso,
            // Utilizar propiedades integradas
            buildProps: ['ancho', 'min-height', 'acolchado'],
            // Usar 'propiedades' para definir/anular una sola propiedad
            Propiedades: [
            //         {
            // Tipo de entrada,
            // opciones: entero | Radio | select | color | deslizador | archivo | compuesto | Stack
            tipo: 'entero',
            nombre: 'El ancho', // Etiqueta para la propiedad
            propiedad: 'width', // propiedad CSS (si buildProps la incluye, se extenderá)
            unidades: ['px', '%'], // Unidades, disponibles solo para tipos 'enteros'
            valores por defecto: 'auto', // Valor por defecto
            min: 0, // Valor mínimo, disponible solo para tipos 'enteros'
            //         }
            //     ]
            // },
            {
                nombre: 'Extra',
                abierto: falso,
                buildProps: ['color de fondo', 'sombra de caja', 'prop personalizado'],
                Propiedades: [
                    {
                        ID: 'Atrezzo personalizado',
                        nombre: 'Custom Label',
                        Propiedad: 'tamaño de fuente',
                        tipo: 'select',
                        Valores predeterminados: '32px',
                        Lista de opciones, disponibles solo para tipos 'select' y 'radio'
                        Opciones: [
                            { valor: '12px', nombre: 'Tiny' },
                            { valor: '18px', nombre: 'Medium' },
                            { valor: '32px', nombre: 'Big' },
                        ],
                    }
                ]
            }
        ]
    },

deviceManager: {
        Dispositivos: [
            {
                nombre: 'Escritorio',
                Ancho: '', // tamaño por defecto
            },
            {
                nombre: 'Tablet',
                Ancho: '480px', // Este valor se usará en el ancho del lienzo
                widthMedia: '768px', // este valor se usará en CSS @media
            },
            {
                nombre: 'Mobile',
                Ancho: '320px', // Este valor se usará en el ancho del lienzo
                widthMedia: '480px', // este valor se usará en CSS @media
            }
        ]
    },

});

¿Alguien puede explicarme qué me estoy perdiendo? Creo que cargar grapesjs-blocks-basic.min.js debería hacer que esos bloques sean visibles automáticamente, pero me equivoco al creer esto. Por favor, ayúdame y ponme en el camino correcto... Muchas gracias de antemano

Respuestas (2)

gasserol17 de octubre de 2018

Encontré el problema, estaba cargando un archivo js incorrecto... Perdona.

lock[bot]17 de octubre de 2019

Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.

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.