La solicitud de FontAwesome falla con 404
CDNJS no almacena Fontawesome en grapesjs (pero el CSS de grapesjs intenta cargarlos). La solución propuesta por @detectedstealth es para el CSS del canvas, así que no tiene nada que ver con este problema del CSS del editor Así que intenta incluir fontawesome manualmente en tu página HTML o simplemente usa https://unp...
Lee la respuesta completa abajo ↓Pregunta
Esto es para la versión 0.14.33. Tras inicializar el lienzo y seleccionar un elemento 3, se generan solicitudes de red a la siguiente manera:
- https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.woff2?v=4.7.0
- https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.woff?v=4.7.0
- https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.ttf?v=4.7.0
Las 3 solicitudes fallan con un estado de 404 y ninguno de los iconos de la barra de herramientas aparece. Esto se ejecuta dentro de un cliente Electron (Chromium v66.0.3359.181) en MacOS 10.13.6. Estoy cargando uvas desde CDN. Si lo cargo localmente, esto no ocurre.
Aquí está mi inicialización: 'let editor = grapesjs.init({ contenedor: '#canvas', fromElement: cierto, Altura: '100%', Ancho: '100%', storageManager: {type: null}, Paneles: {predeterminados: []}, blockManager: { appendTo: '#editorControls', Bloqueos: [ { id: 'sección', etiqueta: '<b>Section</b>', Atributos: { Clase: 'GJS-Bloque-Sección' }, Contenido: '<section> <h1>Este es un título sencillo</h1> <div>Esto es solo un texto de Lorum: Lorem ipsum dolor sit amit</div> '</section> } ] } });`
Respuestas (3)
CDNJS no almacena Fontawesome en grapesjs (pero el CSS de grapesjs intenta cargarlos). La solución propuesta por @detectedstealth es para el CSS del canvas, así que no tiene nada que ver con este problema del CSS del editor Así que intenta incluir fontawesome manualmente en tu página HTML o simplemente usa https://unpkg.com/grapesjs/dist/css/grapes.min.css
@keithstric para que yo pudiera hacer que Font Awesome funcionara en el editor necesitaba añadir:
lienzo: {
Estilos: ['https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.woff2?v=4.7.0', ....]
}
A la init({}).
¿Lo has probado?
Gracias por tu respuesta. Así que lo probé, añadí:
'lienzo: { Estilos: ['https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.woff2?v=4.7.0'] },`
A mis opciones iniciales, pero sigo teniendo el mismo comportamiento. Intenté instalarlo localmente y eso me ayudó a solucionar este problema, pero pensé que podría ayudar a alguien más si se encontraba una solución
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1699
[BUG] Los elementos del enlace no son copiables ni eliminables
En el editor, si tenemos un elemento enlace con algunas clases, el editor no permite copiar o eliminar el elemento. Versión GrapesJS: v0.14...
Issue #1812
[Bug]: 404 al intentar añadir imagen de fondo (reproducible en la demo)
Visita https://grapesjs.com/demo.html en Chrome IncognitoHaz clic en el elemento "Cabecera"Haz clic en Decoraciones > FondoEliminar la capa...
Issue #595
No se puede arrastrar con acciones rápidas
Cuando muevo un bloque en el lienzo antes de mostrar el elemento clonado, el editor no hace nada. Solo mueve el clon del símbolo del bloque...
Issue #987
[BUG/Pregunta] Indicador desplegable no mostrado para un rasgo personalizado
Hola, El icono desplegable (select) de la flecha de elemento no se renderiza al añadir un rasgo personalizado a un componente: ! imagen Est...
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.