¿Es posible incluir una hoja de estilo externa en el lienzo de grapesjs?
Por favor, ignóralo. Al final inyecté el enlace de la hoja de estilo usando javascript en el iframe de Canvas de Grapes Inserte una hoja de estilo externa en la ventana Grapesjs var iframes = Utilities_GetElementsByClass("gjs-frame", "IFRAME", document.body); for (var i=0; i<iframes.length; i++) { var iframe = iframes...
Lee la respuesta completa abajo ↓Pregunta
Queremos crear algunos componentes personalizados cuyo estilo cambie según un css de tema externo (puede haber diferentes temas), y queremos que esos estilos aparezcan en el lienzo durante la edición.
Respuestas (3)
Por favor, ignóralo. Al final inyecté el enlace de la hoja de estilo usando javascript en el iframe de Canvas de Grapes
Inserte una hoja de estilo externa en la ventana Grapesjs
var iframes = Utilities_GetElementsByClass("gjs-frame", "IFRAME", document.body);
for (var i=0; i<iframes.length; i++) {
var iframe = iframes[i];
var doc = iframe.contentDocument;
var element = document.createElement("link");
element.setAttribute("rel", "hoja de estilo");
element.setAttribute("type", "text/css");
element.setAttribute("href", "/CSS/Website.css");
doc.getElementsByTagName("cabeza")[0].appendChild(element);
}Puedes inyectar scripts/estilos mediante la opción de configuración de canvas
'''js const editor = grapesjs.init({ ... lienzo: { Estilos: ['https://...', '...'], guiones: ['https://...'], } });
¡Gracias!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #966
[PREGUNTA] ¿Cómo cargar un archivo CSS externo en Grapes Editor?
Hola, Durante mi editor = grapesjs.init(), quiero cargar un archivo CSS externo en el lienzo usando @import url(...). Así que cuando use mi...
Issue #1807
Fallas del marco de GrapeJ al añadir una hoja de estilo externa
Cuando añado mi hoja de estilo externa usando El marco de GrapesJS ya no funciona. ¿Cómo puedo tener la hoja de estilo además del framework...
Issue #1877
[SOLICITUD DE FUNCIÓN] ¿Estilos personalizados que añaden o eliminan clases personalizadas?
Actualmente, todos los valores del gestor de estilo que cambias para un elemento simplemente actualizan una <style> etiqueta en línea en el...
Issue #473
Hoja de estilo externa
Buen trabajo. Tengo un pequeño problema: si los estilos de la página web se mueven a una hoja de estilo, entonces la mayoría de las propied...
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.