¿CSS en espacio de nombres?
¿Crees que podrías simplemente prefijar todos los nombres de clase generados por Grapejs? Si en vez de .row usas .grape-row o lo que sea (probablemente haría que el prefijo sea una variable), obtendrás principalmente el efecto que @tomichal buscas.
Lee la respuesta completa abajo ↓Pregunta
Hola, ¿Hay alguna forma de configurar el editor grapesjs de modo que el CSS generado para el contenido HTML esté espaciado en nombres? En otras palabras, ¿cómo evitar que las reglas de estilo definidas para el contenido creado/editado en el editor se filtren al resto de la página web?
En el caso de mi sitio web, el usuario puede editar gran parte de la página, pero no toda: el resto del contenido HTML y CSS de la página es generado dinámicamente por el servidor (esto es un sitio Rails + Angular).
He comprobado que si, por ejemplo, uso una fila con columnas, el CSS generado por el editor grapesjs tendrá una definición para una clase "fila" (es decir, ".row { ... }"). Sin embargo, uso una librería CSS que proporciona sus propias definiciones para una clase "fila", por lo que la definición de grapesjs entra en conflicto con mi CSS a nivel de sitio.
¡Gracias por cualquier ayuda y consejo sobre este problema!
Respuestas (3)
¿Crees que podrías simplemente prefijar todos los nombres de clase generados por Grapejs? Si en vez de .row usas .grape-row o lo que sea (probablemente haría que el prefijo sea una variable), obtendrás principalmente el efecto que @tomichal buscas.
De hecho, puedes añadir un oyente en los nuevos selectores y añadir un prefijo ahí '''js prefijo const = 'miprefijo-';
editor.on('selector:add', selector => { nombre de const = selector.get('nombre');
si (selector.get('type') === editor. SelectorManager.Selector.TYPE_CLASS & name.indexOf(prefijo) !== 0) { selector.set('name', prefijo + nombre); } });
HOLA, La gente que busca sandbox, prefijo el CSS exportado puede intentarlo, nosotros tuvimos el mismo caso de uso y optamos por el enfoque sass.
Para ello, utilicé sass.js (https://github.com/medialize/sass.js/)
Pasos:
- encierra la cadena css con tu clase personalizada, por ejemplo, MiClase Personalizada.
- Ejecuta sass.compile desde la biblioteca anterior para convertir el scss a css, que ahora está en sandbox con la clase given() ,
Así no te enfrentarás al problema de conflictos.
Esta respuesta fue copiada de otra pregunta. #2363
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #826
[Bug] El ID generado automáticamente por elementos no se vuelve a añadir después de usar el ID personalizado y luego borrarse
Hola, Creo que hay un error relacionado con la generación de atributos de id de elemento. Al modificar el estilo del elemento, el valor del...
Issue #1368
Redimensionar el lienzo
¿Hay alguna forma de que el lienzo redimensione de forma dinámica? es decir, no usar el Administrador de dispositivos, sino arrastrar y sol...
Issue #367
Comunidad - Colectivo abierto y Discord.
Hola Artur/chicos, Propongo las siguientes ideas: Abre un canal de Discord o Slack (Discord está tomando el control) para hablar de temas f...
Issue #2383
El componente personalizado no atrae el estilo en la primera adición.
Fiddle replicando el problema: https://jsfiddle.net/gd8mo3e4/1/ Tengo un componente personalizado para crear una galería de documentos pdf....
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.