Aplicar una clase personalizada a un componente no parece funcionar
también probé editor. CssComposer.setRule('.nolink', {'background-color':'red'}); Pero tampoco parecía funcionar 'setRule' es la API correcta y funciona, pero solo crea la regla; también tienes que añadir la clase al componente si quieres verla en canvas (por ejemplo, 'editor.getSelected().addClass('nolink')')
Lee la respuesta completa abajo ↓Pregunta
Estoy añadiendo una clase en un componente cuando no se cumplen ciertas condiciones, en este caso cuando no hay un conjunto de href. He visto la fuente y veo la clase "nolink" en ella, pero no pone el color de fondo en rojo y no lo veo al inspeccionar el elemento, así es como intento añadirlo, pero cuando hago cc.getAll() no veo la clase nolink, así que no sé dónde se están descomponiendo
'var cc = editor. CssComposer;' 'var nolink = editor. SelectorManager.add('nolink');' 'var rule = editor. CssComposer.add([nolink]);' 'rule.set('style', { 'color de fondo': 'rojo' });`
También probé 'editor. CssComposer.setRule('.nolink', {'background-color':'red'});' pero tampoco parecía funcionar
Respuestas (2)
también probé editor. CssComposer.setRule('.nolink', {'background-color':'red'}); Pero tampoco parecía funcionar
'setRule' es la API correcta y funciona, pero solo crea la regla; también tienes que añadir la clase al componente si quieres verla en canvas (por ejemplo, 'editor.getSelected().addClass('nolink')')
Gracias por informar de esto, @rcloss.
Gracias por compartir tu informe sobre aplicar una clase personalizada a un componente no parece funcionar. Para ayudar al equipo a investigar y priorizar esto:
Por favor, proporciona:
- Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
- Tu GrapesJS número de versión
- Información sobre navegador y sistema operativo
- Cualquier mensaje de error de la consola del navegador
- Pasos para reproducir el problema
Lo que más ayuda:
- Ejemplo de código mínimo (no tu proyecto completo)
- Grabación de pantalla o captura de pantalla que muestra el problema
- Comportamiento esperado frente a comportamiento real claramente indicado
- Configuración GrapesJS que estás usando
Con estos detalles, los mantenedores pueden identificar y priorizar una solución mucho más rápido. El equipo de GrapesJS responde muy bien a los problemas bien documentados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3559
page.getMainComponent().view da información indefinida cuando se selecciona la página
Hola @artf, Quiero obtener el elemento HTML de la página seleccionada. Pero devuelve indefinido al usar el siguiente código: '''js editor.o...
Issue #3219
Añadir Tipo para bloque y css con nombre de clase
Hola @artf Estoy atascado en una cosa, quiero añadir un bloque en el que quiero añadir estilo con el nombre de la clase también Aquí está m...
Issue #3122
Falta el estilo multimedia en el componente duplicado
Versión: 0.16.27 Resumen: Falta el estilo multimedia en el componente duplicado Pasos para reproducir: Intenta cambiar algo en la tablet o...
Issue #3717
La plantilla no se carga usando solo componentes
Estoy intentando cargar una plantilla existente. Creo que debería funcionar con componentes o HTML, pero parece que solo funciona a través...
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.