Issue #1584💬 RespondidoAbierto el 15 de noviembre de 2018por coder-strangeReacciones 1

No obtengo el script de bloque de editor.getComponents()

Respuesta rápidapor artf1

@taufeek6 #1576

Lee la respuesta completa abajo ↓

Pregunta

A continuación está el componente que voy a añadir.

Fragmento de códigoTEXT
> this.editor.BlockManager.add('dob-mmyy-pii', {
        id: 'dob-mmyy',
        etiqueta: 'FECHA DE NACIMIENTO (MM, AAAAO) (PII)',
        categoría: 'Formas',
        atributos: {clase:'fa fa-tarta-cumpleaños'},
        contenido : {
          Contenido : '<div>
            <label>Data de nacimiento (Mes y año)</label>
            <nombre de entrada='dob' clase="control-forma">
          ',</div>
          script : función(){
           
$( $(this).find('input[name="dob"]') ).datepicker({
              changeMonth: cierto,
              cambioAño: cierto,
              mostrarButtonPanel: cierto,
              FormatoFecha: 'MM sí',
              onClose: function(dateText, inst) { 
                  console.log("inst",inst)
                  $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
              },
              antesMostrar:función(){
                setTimeout(()=>{$('.ui-datepicker-calendar').css("display", "none").hide();
                }, 1);
              },
              onChangeMonthYear:function(){
                setTimeout(()=>{$('.ui-datepicker-calendar').css("display", "none").hide();
                }, 1);
              
}
            })
          }
        }
    });

y haciendo editor.getComponents(), esto es lo que obtengo.

'[{{"tagName":"div","type":"","name":"","removable":true,"arrastrable":true,"droppable":true,"badgable":true,"stylable":true,"stylable-require":"","style-signature":"""unstylable":"","highlightable":true,"copyable":true,"ressizeable":false,"editable":false,"editable":false,"layerable":true,"selectable":true,"hoverable":true,"void":false,"state":"status":"selected","content":"\<div>n <label>DATE <de</label> nacimiento='dob' clase=\"control-forma\">\n </div>","icono":"","estilo":"clases":[],"atributos":{"id":"ixm7"},"rasgos":[{"tipo":"texto","etiqueta":""min":""nombre":"id","min":""max":","unidad":"paso":1,"valor":"ixm7", "default":"""marcador de posición":"ej. Texto aquí","changeProp":0,"options":[]},{"type":"text", "label":""", "name":"title", min"""", "max":""unit":"""step":"value":"","default":""placeholder":"ej. Texto aquí","changeProp":0,"options":[]}],"propagar":"","components":[]}]'

No encuentro el guion que he definido en el bloque, por favor dime si estoy haciendo algo mal.

Edito:
He encontrado un error similar al mío: [#1569](https://github.com/artf/grapesjs/issues/1569), pero el enlace que aparece no cubre mi problema.

Respuestas (3)

artf19 de noviembre de 2018

@taufeek6 #1576

artf17 de noviembre de 2018

Si el 'script' es una función y no puedes serializarlo en un JSON. Creo que, en tu caso, necesitas un nuevo tipo de componente personalizado (solo estás añadiendo un bloque) y luego exportarás solo las propiedades cambiadas (el 'script' formará parte de la definición de componentes, así que no lo necesitarás en JSON).

coder-strange19 de noviembre de 2018

¡Bingo! Eso funcionó perfectamente pero permite que todos los elementos a seleccionar en el bloque (al dar directamente al bloque html en 'content', content : { content : 'html' } funcionaba bien), así que ¿cómo prohíbo que los elementos se seleccionen en un bloque? ! imagen

Por ejemplo, en la imagen anterior, no quiero que se seleccione esa etiqueta, botón o encabezados; cada vez que el usuario seleccione, se seleccionará todo el bloque.

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.