Gestor de bloques e imagen
@alfaalex81 Para el objeto 'content', puedes añadir un nuevo índice llamado 'classes'. Este índice debe ser un array de clases, que se aplicarán al nuevo bloque Image; Código final:
Lee la respuesta completa abajo ↓Pregunta
¡Hola! Uso este código para añadir un nuevo bloque:
blockManager.add("image", { etiqueta: 'Image', categoría: 'Básico', atributos: { clase: "gjs-fonts gjs-f-image" }, Contenido: { Estilo: { color: "negro" }, tipo: "imagen", activeOnRender: 1, }, });
¿Cómo puedo añadir una clase personalizada a la etiqueta de img cuando entro en Canvas?
Gracias.
Respuestas (3)
@alfaalex81 Para el objeto 'content', puedes añadir un nuevo índice llamado 'classes'. Este índice debe ser un array de clases, que se aplicarán al nuevo bloque Image;
Código final:
blockManager.add("image", {
etiqueta: 'Image',
categoría: 'Básico',
atributos: { clase: "gjs-fonts gjs-f-image" },
Contenido: {
Estilo: { color: "negro" },
tipo: "imagen",
Clases: ['Clase1', 'Clase2']
activeOnRender: 1,
},
});
¡Genial!
Tengo otra pregunta para el mismo argumento. Necesito crear un bloque personalizado con una imagen dentro, por ejemplo:
<div>
<ul>
<li>
<div><a href="#link"><img src="" alt="Imagen del título" /></a></div>
<a href="#link" >Título</a>
</li>
</ul>
</div>
Añado el código con el gestor de bloques, pero al acceder a Canvas Asset Manager no se abre. Si no, si uso el atributo image type, ignora mi contenido html, guardé un ejemplo en js fiddle:
https://jsfiddle.net/fp78yon0/
¡Gracias!Este no es el comportamiento del actual. El Gestor de Activos solo se abre si dejas caer directamente un bloque IMG.
Debes tener que seleccionar el bloque img dentro de tu bloque personalizado y ejecutar un código así:
editor.runCommand('open-assets', {
objetivo: editor.getSelected()
});
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #493
[PREGUNTA] ¿Puedo configurar contenido dinámicamente desde la API de bloques?
Hola @artf, muy buen framework para creadores de páginas web y mantenlo así :+1: Código : '''javascript ... blockManager.add('dynamic-nav',...
Issue #1556
Añadir nuevo bloque al gestor de bloques: el contenido predefinido y el contenido del editor son diferentes
Intento usar el motor de plantillas con grapesjs. Añadir un nuevo bloque con esto: Arrastra el nuevo bloque al editor y entonces el conteni...
Issue #1134
Añade estilo personalizado en la hoja de estilo para una nueva clase de bloque existente.
Hola @artf _("map") && i.add("map", { etiqueta: n.etiquetaMapa, Categoría: N.Categoría, atributos: { Clase: "FA FA-MAP-O" }, Contenido: { T...
Issue #1572
Problema al añadir bloque de vídeo manualmente
Añadí Video Block manualmente así. <pre> blockManager.add('video', { etiqueta: 'Vídeo', categoría: 'Medios', Atributos: {clase: 'FA FA-YouT...
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.