¿Cómo añadir bloques?
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)
Encontré el problema, estaba cargando un archivo js incorrecto... Perdona.
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.
Issue #1623
Mismo diseño para todos los bloques
Hola @artf, esto en realidad no es un error, pero me gustaría preguntar Si existe algo como el diseño global para cada bloque. por ejemplo,...
Issue #1893
[PREGUNTA] Por definición, todos los bloques tienen que tener el mismo estilo
Estamos usando blockManager, como puedes ver en el ejemplo publicado en codesandbox, siguiendo la documentación relacionada con el renderiz...
Issue #1715
Hola, soy nuevo en tu proyecto, pero me encanta. Tengo un pequeño problema con los atributos de la imagen.
He añadido dos rasgos nuevos al gestor de rasgos para imágenes. Anchura y altura. Lo añadí como plugin siguiendo tu ejemplo. Funciona perfe...
Issue #1347
Los bloques no aparecen en diferentes pestañas y sí se muestran en una sola pestaña
! imagen Hola @artf, Estoy usando tu plugin y quiero usar bloques en diferentes pestañas como bloques, widgets y cuadras, pero cuando uso l...
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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.