Colisión de estilos de biblioteca de terceros

Question

Hola, Me gustaría incluir estilos de terceros y JavaScript en el editor. Se están añadiendo así:

... 
const editor = grapesjs.init({
  lienzo: {
    Estilos: [
      /path/to/css/file
    ],
    guiones: [
      /path/to/js/file
    ]
  },
...
})
...

El problema que estoy experimentando con el CSS de terceros es que algunas de sus reglas de estilo chocan con las reglas de estilo del editor, por ejemplo, la biblioteca de terceros usa una clase "row".

¿Hay alguna forma recomendada de evitarlo? ¿Quizá me estoy perdiendo alguna solución obvia para esto? ¡Gracias por cualquier ayuda y por crear un editor increíble!

tomichal · Accepted Answer

He mirado dentro del plugin https://github.com/artf/grapesjs-blocks-basic y parece que el problema que estoy experimentando viene de ahí, es decir, el plugin no usa la configuración ''stylePrefix' del editor grapesjs, a pesar de que inicialmente lo ha sacado desde el editor aquí: https://github.com/artf/grapesjs-blocks-basic/blob/22d7799d7ecfccd55da67035acb797c8e7f86ccd/src/index.js#L4

Después de obtener el ''stylePrefix'' del editor, el plugin procede a codificar de forma dura los nombres de las clases CSS, por ejemplo ''.row''', que es una de las, o quizá la única, clase que entra en conflicto con los estilos externos de biblioteca que intento usar en el editor (https://vmware.github.io/clarity/).

artf · Answer

Hola @tomichal parece que entiendes exactamente dónde está el problema. Cierro esto en favor de https://github.com/artf/grapesjs-blocks-basic/issues/2

lock[bot] · Answer

Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.

Colisión de estilos de biblioteca de terceros

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

[Pregunta] Clase CSS

[PREGUNTA] ¿Cómo cargar un archivo CSS externo en Grapes Editor?

Construcción de componentes gjs

[PREGUNTA] Cambios de ID al importar HTML o pasar HTML en components prop en config.

Plugins de pago que cumplen con este problema

Tutoriales relacionados

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Explorar categorías de plugins