No hay opción de flexión en el panel lateral
El plugin 'gjs-preset-webpage' por defecto no tiene sección flexible, así que tienes que escribir tu propio 'customStyleManger'
Lee la respuesta completa abajo ↓Pregunta
Estoy usando los plugins de grapesjs para construir las opciones del panel lateral y diferentes elementos. Estoy buscando esta sección flexible en el panel lateral, pero no hay ninguna.
! bd142f9d-2264-4a66-97f2-997fd4c1faee
¿Hay alguna opción que deba activar para esto en cualquiera de los siguientes plugins que estoy usando?
'gjs-preset-webpage', 'grapesjs-lory-slider', 'grapesjs-tabs', 'grapesjs-tooltip', 'grapesjs-custom-code', 'grapesjs-typed', 'gjs-blocks-flexbox'
Intenté añadir el 'customStyleManager' en 'gjs-preset-plugin', pero eso anula todas las opciones predeterminadas que viene este plugin; tengo que escribir manualmente todas esas opciones en 'customStyleManager', no quiero hacer eso. Por favor, ayudadme, ¡gracias!
Respuestas (3)
El plugin 'gjs-preset-webpage' por defecto no tiene sección flexible, así que tienes que escribir tu propio 'customStyleManger'
Cambia el _styles/index.js_ con el contenido que se muestra a continuación. También actualiza los estilos según sea necesario
`
Exportar por defecto (editor, configuración) => {
const sm = editor. StyleManager;
const csm = config.customStyleManager;
const oConfig = [
{
nombre: 'General',
buildProps: ['flotar', 'mostrar', 'posición', 'arriba', 'derecha', 'izquierda', 'abajo'],
Propiedades: [
{
nombre: 'Alignment',
propiedad: 'flotar',
Tipo: 'Radio',
Valores predeterminados: 'ninguno',
lista: [
{valor: 'ninguno', claseNombre: 'fa fa-times'},
{valor: 'izquierda', claseNombre: 'fa fa-aline-izquierda'},
{valor: 'right', className: 'fa fa-align-right'}
],
},
{propiedad: 'posición', tipo: 'select'}
],
},
{
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,
},
{
Propiedad: 'Margen',
Propiedades: [
{nombre: 'Top', propiedad: 'margen-top'},
{nombre: 'Derecha', propiedad: 'margen-derecha'},
{nombre: 'Bottom', propiedad: 'margin-bottom'},
{nombre: 'Izquierda', propiedad: 'margen-izquierda'}
],
},
{
Propiedad: 'acolchado',
Propiedades: [
{nombre: 'Top', propiedad: 'padding-top'},
{nombre: 'Derecho', propiedad: 'derecho de acolchado'},
{nombre: 'Bottom', propiedad: 'tapding-bottom'},
{nombre: 'Izquierda', propiedad: 'acolchonado-izquierda'}
],
}
],
},
{
nombre: 'Tipografía',
abierto: falso,
buildProps: ['familia-fuente', 'tamaño-fuente', 'peso-fuente', 'espaciado entre letras', 'color', 'altura de línea', 'alineación-texto', 'decoración-texto', 'sombra-texto'],
Propiedades: [
{
nombre: 'Fuente', propiedad: 'font-family'
},
{
nombre: 'Peso',
Propiedad: 'Peso-fuente'
},
{
nombre: 'Color de fuente',
Propiedad: 'color'
},
{
Propiedad: 'Alineación de texto',
Tipo: 'Radio',
valores por defecto: 'izquierda',
lista: [
{valor: 'izquierda', nombre: 'Izquierda', claseNombre: 'fa fa-align-left'},
{valor: 'centro', nombre: 'centro', claseNombre: 'fa fa-align-center'},
{valor: 'derecha', nombre: 'Derecha', claseNombre: 'fa fa-align-right'},
{valor: 'justificar', nombre: 'Justificar', claseNombre: 'fa fa-align-justify'}
],
},
{
propiedad: 'decoración de texto',
Tipo: 'Radio',
Valores predeterminados: 'ninguno',
lista: [
{valor: 'ninguno', nombre: 'Ninguno', claseNombre: 'fa fa-times'},
{valor: 'subrayado', nombre: 'subrayado', claseNombre: 'fa fa-subrayado'},
{valor: 'line-through', nombre: 'Line-through', className: 'fa fa-strikethrough'}
],
},
{
propiedad: 'sombra de texto',
Propiedades: [
{nombre: 'posición X', propiedad: 'text-shadow-h'},
{nombre: 'Y posición', propiedad: 'text-shadow-v'},
{nombre: 'Desenfoque', propiedad: 'texto-sombra-desenfoque'},
{nombre: 'Color', propiedad: 'color-sombra-texto'}
],
}
],
},
{
nombre: 'Decoraciones',
abierto: falso,
buildProps: ['opacidad', 'radio de borde', 'borde', 'sombra de caja', 'fondo'],
Propiedades: [
{
Tipo: 'Deslizador',
propiedad: 'opacidad',
Valores por defecto: 1,
escalón: 0,01,
máximo: 1,
min: 0,
},
{
propiedad: 'radio de frontera',
Propiedades: [
{nombre: 'Top', propiedad: 'borde-arriba-izquierda-radio'},
{nombre: 'Derecha', propiedad: 'límite-arriba-derecha-radio'},
{nombre: 'Inferior', propiedad: 'borde-abajo-izquierda-radio'},
{nombre: 'Izquierda', propiedad: 'borde de abajo a la derecha'}
],
},
{
propiedad: 'sombra de caja',
Propiedades: [
{nombre: 'posición X', propiedad: 'caja-sombra-h'},
{nombre: 'posición Y', propiedad: 'box-shadow-v'},
{nombre: 'Desenfoque', propiedad: 'caja-sombra-borrón'},
{nombre: 'Spread', propiedad: 'box-shadow-spread'},
{nombre: 'Color', propiedad: 'color-sombra-caja'},
{nombre: 'tipo sombra', propiedad: 'tipo sombra caja'}
],
},
],
},
{
nombre: 'Extra',
abierto: falso,
buildProps: ['transición', 'perspectiva', 'transformación'],
Propiedades: [
{
Propiedad: 'transición',
Propiedades: [
{nombre: 'Propiedad', propiedad: 'transición-propiedad'},
{nombre: 'Duración', propiedad: 'duración de transición'},
{nombre: 'Easysing', propiedad: 'función-temporización-transición'}
],
},
{
Propiedad: 'transformar',
Propiedades: [
{nombre: 'Rotar X', propiedad: 'transformar-rotar-x'},
{nombre: 'Rotar Y', propiedad: 'transformar-rotar-y'},
{nombre: 'Rotar Z', propiedad: 'transformar-rotar-z'},
{nombre: 'Escala X', propiedad: 'transformar-escala-x'},
{nombre: 'Escala Y', propiedad: 'transform-scale-y'},
{nombre: 'Escala Z', propiedad: 'transformar-escala-z'}
],
}
]
},
{
nombre: 'Flex',
abierto: falso,
Propiedades: [
{
nombre: 'Flex Container',
Propiedad: 'Display',
tipo: 'select',
valores predeterminados: 'bloquear',
lista: [
{valor: 'bloqueo', nombre: 'Desactivar'},
{valor: 'flex', nombre: 'Enable'}
],
},
{
nombre: 'Flex Parent',
Propiedad: 'etiqueta-padre-flexión',
tipo: 'entero',
},
{
nombre: 'Dirección',
Propiedad: 'dirección flexible',
Tipo: 'Radio',
valores predeterminados: 'fila',
lista: [
{
valor: 'fila',
nombre: 'Row',
claseNombre: 'iconos-flex, icono-dir-fila',
título: 'Row',
},
{
valor: 'invertida de fila',
nombre: 'Reverso de fila',
claseNombre: 'icons-flex icon-dir-row-rev',
título: 'Reversa de fila',
},
{
valor: 'columna',
nombre: 'Columna',
título: 'Columna',
claseNombre: 'icons-flex icon-dir-col',
},
{
valor: 'reverso de columna',
nombre: 'reverso de columna',
título: 'reverso de columna',
claseNombre: 'iconos-flex icon-dir-col-rev',
}
],
},
{
nombre: 'Justificar',
Propiedad: 'justificar-contenido',
Tipo: 'Radio',
Valores por defecto: 'Arranque Flexible',
lista: [
{
Valor: 'Salida Flexible',
claseNombre: 'iconos-flexionar icono-acaba-empezar',
título: 'Inicio',
},
{
valor: 'flex-end',
título: 'Fin',
claseNombre: 'iconos-flexionar icono-solo-terminar',
},
{
valor: 'espacio entre',
título: 'Espacio entre',
claseNombre: 'iconos-flex icono-solo-sp-apuesta',
},
{
valor: 'espacio-alrededor',
título: 'Espacio alrededor',
claseNombre: 'iconos-flexión, icono-justo-sp-ar',
},
{
valor: 'centro',
título: 'Centro',
claseNombre: 'iconos-flexión, icono-justo-sp-c-cent',
}
],
},
{
nombre: 'Align',
propiedad: 'alinear-elementos',
Tipo: 'Radio',
valores predeterminados: 'centro',
lista: [
{
Valor: 'Salida Flexible',
título: 'Inicio',
claseNombre: 'iconos-flex icon-al-start',
},
{
valor: 'flex-end',
título: 'Fin',
claseNombre: 'icons-flex icon-al-end',
},
{
valor: 'estiramiento',
título: 'Estira',
claseNombre: 'iconos-flexión icon-al-str',
},
{
valor: 'centro',
título: 'Centro',
claseNombre: 'iconos-flex icon-al-centro',
}
],
},
{
nombre: 'Flex Children',
Propiedad: 'etiqueta-padre-flexión',
tipo: 'entero',
},
{
nombre: 'Orden',
Propiedad: 'orden',
tipo: 'entero',
Defaults: 0,
min: 0
},
{
nombre: 'Flex',
Propiedad: 'flex',
tipo: 'compuesto',
Propiedades: [
{
nombre: 'Crece',
Propiedad: 'flex-grow',
tipo: 'entero',
Defaults: 0,
min: 0
},
{
nombre: 'Shrink',
Propiedad: 'flex-shrink',
tipo: 'entero',
Defaults: 0,
min: 0
},
{
nombre: 'Base',
Propiedad: 'Base flexible',
tipo: 'entero',
Unidades: ['PX', '%', ''],
Unidad: '',
Valores por defecto: 'auto',
}
],
},
{
nombre: 'Align',
Propiedad: 'Alinear-Yo',
Tipo: 'Radio',
Valores por defecto: 'auto',
lista: [
{
valor: 'auto',
nombre: 'Auto',
},
{
Valor: 'Salida Flexible',
título: 'Inicio',
claseNombre: 'iconos-flex icon-al-start',
},
{
valor: 'flex-end',
título: 'Fin',
claseNombre: 'icons-flex icon-al-end',
},
{
valor: 'estiramiento',
título: 'Estira',
claseNombre: 'iconos-flexión icon-al-str',
},
{
valor: 'centro',
título: 'Centro',
claseNombre: 'iconos-flex icon-al-centro',
}
],
}
]
}
];
sm.getSectors().reset(csm & & csm.length ? csm : oConfig);
}
`sm.getSectors().reset(csm)
Eso fue lo que me solucionó, supongo que oConfig también funcionaría. No entiendo por qué es necesario... o más concretamente, por qué la demo se sale con la suya NO hacerlo (a menos que me lo esté perdiendo).
Desde luego parece que estoy repasando los errores comunes mientras aprendo esta plataforma, jaja, debo de haber publicado unas 30 veces hoy en este paquete.
La explicación sería mágica.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1929
Carga el gestor de activos, pero los activos no funcionan
Estoy usando el icono del lápiz para activar el gestor de activos. El disparador funciona bien, pero cuando hago clic en cualquiera de las...
Issue #3444
removeButton() causando error
Hola, Estoy intentando eliminar un botón del panel usando este editor de código. Panels.removeButton('opciones', 'pantalla completa')'. Eli...
Issue #1886
¿Cómo crear un desplegable para el botón dentro de un panel?
Estoy intentando crear un desplegable mientras hago clic en un botón. Puedo añadir los datos usando ul, li a un botón. Aparte de eso, ¿hay...
Issue #3512
Los elementos hijos no se pueden arrastrar, se pueden soltar y se pueden resaltar. también el CSS de todos los elementos hijos que no se insertan en la sección de estilo mientras se desarrolla un componente banner en un plugin
Hola @artf, Estoy intentando desarrollar un plugin sencillo para banners que incluya un encabezado, un subtítulo y un enlace. y cada elemen...
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
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.