Añadir Tipo para bloque y css con nombre de clase
'''js Contenido: { Content: section_content, // <- Deberías usar 'components', no 'content'... Type: 'section', } ''' y hazte un favor, deja de definir secciones enteras en bloques, usa un enfoque orientado a componentes para que tus bloques sean principalmente así: ''js bm.add('custom-section', { label: 'Section', me...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf
Estoy atascado en una cosa, quiero añadir un bloque en el que quiero añadir estilo con el nombre de la clase también
Aquí está mi código -:
const section_content = '<section class="gjs-section"><div class="gjs-container"></div></section>
<style>
.gjs-section{
Acolchado: 50px;
}
.gjs-container{
ancho: 90%;
acolchado: 25px;
marje: 0 auto;
Ancho máximo: 1200px;
}
'</style>
bm.add('section',{
etiqueta: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 3v3h19V3m-1 5H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1M2 21h19v-3H2v3z"></path></svg>
<div class="gjs-block-label">Section</div>',
id: 'sección',
Categoría: selection_category,
Contenido: section_content,
atributos: {
'data-gjs-type': 'section'
}
});
Esto me dio exactamente lo que quería Código HTML en la sección de HTML y la parte de estilo en la sección de estilo, pero quiero añadir un nuevo rasgo para lo mismo y cómo puedo definir tipo en esto
Por otro lado, cuando defino tipo y hago algo así
bm.add('section',{
etiqueta: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 3v3h19V3m-1 5H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1M2 21h19v-3H2v3z"></path></svg>
<div class="gjs-block-label">Section</div>',
id: 'sección',
Categoría: selection_category,
contenido:{
Contenido: section_content,
Tipo: 'Sección'
},
atributos: {
'data-gjs-type': 'section'
}
});
Y añadiendo un rasgo nuevo, me da la etiqueta div y el estilo en línea como se muestra en la captura de pantalla. ¿Podrías ayudarme con esto, por favor Gracias
Si voy a definir contenido en componente, ¿cómo puedo definir el estilo con nombre de clase?
<img width="413" alt="Captura de pantalla 2021-01-06 a las 11 04 24 AM" src="https://user-images.githubusercontent.com/20657737/103745089-e242b780-5024-11eb-9dff-5901a218a028.png">Respuestas (2)
'''js Contenido: { Content: section_content, // <- Deberías usar 'components', no 'content'... Type: 'section', } ''' y hazte un favor, deja de definir secciones enteras en bloques, usa un enfoque orientado a componentes para que tus bloques sean principalmente así: ''js bm.add('custom-section', { label: 'Section', media: '<svg...>', Contenido: { Tipo: 'Sección Personalizada' }, ... });
Gracias por informar de esto, @Abhisheknanda1344463.
Gracias por compartir tu informe sobre Añadir tipo para bloque y CSS con nombre de clase. Para ayudar al equipo a investigar y priorizar esto:
Por favor, proporciona:
- Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
- Tu GrapesJS número de versión
- Información sobre navegador y sistema operativo
- Cualquier mensaje de error de la consola del navegador
- Pasos para reproducir el problema
Lo que más ayuda:
- Ejemplo de código mínimo (no tu proyecto completo)
- Grabación de pantalla o captura de pantalla que muestra el problema
- Comportamiento esperado frente a comportamiento real claramente indicado
- Configuración GrapesJS que estás usando
Con estos detalles, los mantenedores pueden identificar y priorizar una solución mucho más rápido. El equipo de GrapesJS responde muy bien a los problemas bien documentados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3559
page.getMainComponent().view da información indefinida cuando se selecciona la página
Hola @artf, Quiero obtener el elemento HTML de la página seleccionada. Pero devuelve indefinido al usar el siguiente código: '''js editor.o...
Issue #3119
[PREGUNTA] ¿Cómo crear un bloque personalizado hecho con componentes de grapesjs?
Hola, quiero que me hagan bloques personalizados con componentes de grapesjs. Encontré la solución para añadir componentes: https://github....
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...
Issue #3421
[PREGUNTA] Cómo eliminar la regla CSS del selector de clases
Estoy usando componentFirst configurado en true para que mis usuarios apliquen el estilo necesario al componente que seleccionaron. Selecci...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.