Issue #1763💬 RespondidoAbierto el 29 de enero de 2019por poeeainReacciones 0

Añadir <Style> etiqueta en objetos de contenido de bloque (no una cadena)

Respuesta rápidapor artf

'''js Contenido: { script: function(){ console.log("¡Estoy arrastrado!") }, componentes: '...', // usan componentes en lugar de contenido } ``` Por cierto, creo que, en tu caso, un componente personalizado es más apropiado

Lee la respuesta completa abajo ↓

Pregunta

  • Navegador = Chrome
  • GrapesJS = Última versión (0.14.52)

Estoy intentando crear un objeto de contenido que incluya anidamiento de bloques con propiedades script, style, type. Funciona bien salvo añadir <style>la etiqueta **** al contenido.

Descendencia

Si creo contenido de bloque como una Cadena como opción (A) como se indica abajo, CSS va al editor de CSS. Pero si creo contenido de bloque como un objeto como opción (B), CSS permanece en el editor HTML. ( No estoy seguro de que esto sea un error o no )

Aquí, lo que quiero lograr es I quiero crear bloques como opción (B), pero espera que CSS esté en CSS editor.

opción (A)

demo codepen (A) ! a

Bloqueos: [
          {
                id: 'enlace',
                etiqueta: 'Enlace',
                categoría: 'Básico',
                atributos: {
                    Clase: 'FA FA-Link'
                },
                contenido: '<a class="mylink-one" href="#">Esto es un enlace</a>
<a class="milink-dos" href="#">Esto es un enlace</a>
<style>.mienlace-uno{color:red;}. mylink-two{color:skyblue;}</style>`,     
            }
          ]

opción (B)

demo codepen (B) ! b

Bloqueos: [
          {
                id: 'enlace',
                etiqueta: 'Enlace',
                categoría: 'Básico',
                atributos: {
                    Clase: 'FA FA-Link'
                },
                Contenido: {
                    script: function(){
                        console.log("¡Estoy arrastrado!")
                    },
                    Tipo: 'Enlace',
                    contenido: '<a class="mylink-one" href="#">Esto es un enlace</a>
<a class="milink-dos" href="#">Esto es un enlace</a>
<style>.milink-uno{color:skyblue};. mienlaz-dos{color:teal}</style>',
                }
            }
          ]

¿Por qué quiero esto? Porque tengo un CSS en línea y códigos JavaScript personalizados para añadir al bloque (cuando el usuario arrastra al lienzo).


English no es mi lengua materna; ¡Disculpad mi error explanation.

Respuestas (2)

artf6 de febrero de 2019

'''js Contenido: { script: function(){ console.log("¡Estoy arrastrado!") }, componentes: '...', // usan componentes en lugar de contenido }

Por cierto, creo que, en tu caso, un componente personalizado es más apropiado
lock[bot]6 de febrero de 2020

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.

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.