No se puede usar Font Awesome Icons dentro del lienzo
De hecho, descubrí el problema a mitad de escribir la publicación, pero decidí terminarla y dejarlo aquí por si alguien se encontraba con esto. Los estilos usados para paneles, bloques, etc. no se aplican a los estilos dentro del lienzo, ya que el lienzo está en un marco en I. El problema era que no había instalado el...
Lee la respuesta completa abajo ↓Pregunta
Para empezar, gran trabajo en un proyecto increíble. No puedo creer que esto exista.
Vale, he pasado los últimos días revisando la documentación y ahora estoy empezando a construir mis propios componentes. Sin embargo; para el diseño de plantillas, quiero que mis componentes se rendericen de forma diferente. Veo que puedo interceptar el renderizado y cambiar eso.
Pero estoy intentando renderizar esto:
<div class="templateComponent"> <i class="fa fa-utensils-alt"></i></i> Menú Avanzado</div>
Y por alguna razón, este icono de Font Awesome NO se renderiza (Font Awesome). Este mismo icono funciona bien al renderizar bloques así:
Atributos: {clase: 'FAS FA-Utensilios-Alt FA-2X'},
Entonces descubrí que ningún icono de Font Awesome se renderiza dentro del lienzo. ¿Por qué?
Respuestas (1)
De hecho, descubrí el problema a mitad de escribir la publicación, pero decidí terminarla y dejarlo aquí por si alguien se encontraba con esto.
Los estilos usados para paneles, bloques, etc. no se aplican a los estilos dentro del lienzo, ya que el lienzo está en un marco en I. El problema era que no había instalado el CSS de Font Awesome dentro del lienzo (pero sí en mi aplicación externa, por eso funcionaba para bloques).
Puedes hacer esto en el init:
grapesjs.init({
.. Otros stuf
lienzo: {
cualquier hoja de estilo aquí se importa y se usa SOLO para el lienzo
Estilos: [
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
]
},
y cualquier cosa dentro del baseCSS se incluye en una <styles> etiqueta dentro del lienzo,
Permitiéndote especificar estilos en línea
baseCss: 'estilos CSS aleatorios'
}
Además, si quieres cambiar la apariencia de los objetos dentro del lienzo, puedes incluir estilos en línea usando la propiedad baseCSS.
Gracias, Andrew
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2014
[BUG] - No se puede obtener contenido de un bloque de enlace
Hola a todos, Estoy usando la versión 0.14.52 de grapesjs. Estoy teniendo el siguiente problema: Cuando dejo un bloque de enlace dentro del...
Issue #2013
[BUG] - No se puede obtener contenido de un bloque de enlace
Hola a todos, Estoy usando la versión 0.14.52 de grapesjs. Estoy teniendo el siguiente problema: Cuando dejo un bloque de enlace dentro del...
Issue #3252
¿Quita getHtml() la propiedad de estilo en línea?
Estaba trasteando con formas de cambiar el estilo de los elementos dentro del lienzo y me di cuenta de que al usar el rasgo color-selecter...
Issue #2572
[PREGUNTA] ¿Podemos empezar desde una plantilla predeterminada en lugar de un lienzo en blanco?
Hola, ¡Gracias por esta gran biblioteca! Muy útil de usar. He implementado esto en un proyecto según los requisitos de los clientes. Pero s...
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.