CSS externo no cargando en Canvas
Pregunta
Usar CSS en Init da como resultado una pantalla en blanco: quiero enlazar varios archivos css para que en la página web pueda definir clases, por ejemplo,
Dentro del archivo CSS (ejemplo):
h6, .h6 {
tamaño de fuente: 17px;
Altura de línea: 24px;
}
Y en la página web me gustaría definir texto (por ejemplo) para que tenga la clase h6 o crear un bloque personalizado donde pueda predefinir clases. Sin embargo, esto no funciona porque la pantalla se muestra en negro. Mi código:
const editor = grapesjs.init({
lienzo:{
Styles: [ 'https://... 1.css', 'https://... 2.css' ]
}
})
Estoy usando el plugin 'gjs-preset-webpage' — no > seguro si esto afecta a algo.
Espero que podáis ayudarme porque llevo días intentando resolver esto.
Un cordial cordial Aiyush
EDITO:
Leí en algún sitio que un mal CSS puede romper el editor. No estoy seguro de qué se considera un mal CSS, ¿existe alguna herramienta por la que pueda pasar mi CSS para eliminar estos problemas? aquí tienes una de mis hojas de CSS; es bastante grande, así que lo he adjuntado como una pega en: https://pastebin.com/ctje8bzY (perdonad los números de línea) ACTUALIZACIÓN: aquí hay un archivo sin los números de línea: http://s000.tinyupload.com/index.php?file_id=24295452959919636560
Un cordial cordial Aiyush
Respuestas (1)
RESUELTO: SINTAXIS INCORRECTA
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1780
Cómo cambiar el desplegable extra para el rasgo de cambio de enlace
Hola @artf, Quiero dar una funcionalidad más al usuario, como que el usuario pueda cambiar cualquier enlace con el desplegable de enlaces p...
Issue #2143
Pregunta: ¿Cómo puedo crear una imagen existente como enlace?
Tengo una plantilla existente que actualmente muestra la imagen en el centro de la página. Ahora, quiero que se pueda enlazar o hacer clic...
Issue #4529
Cuando redimensionamos una imagen con la clase 'xyz', todos los elementos de la página con la misma clase también se redimensionan porque el editor añade CSS a esas clases.
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Versión 104.0.5112.101 (Versión oficial) (a...
Issue #3246
¿Es posible usar los tipos de rasgos existentes en nuevos rasgos personalizados? (por ejemplo, el selector de colores)
Me gustaría crear un nuevo rasgo personalizado para usar, que tenga la entrada del selector de color y una casilla de verificación para que...
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.