No obtengo el script de bloque de editor.getComponents()
Pregunta
A continuación está el componente que voy a añadir.
> 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)
@taufeek6 #1576
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).
¡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.
Issue #1034
Insertar elemento o bloque dentro del elemento padre
Buenos días, tengo componente, tengo bloqueo tengo Trait en los cambios de escucha, ¿cómo puedo añadir "h1" dentro de ese bloque "''<div cl...
Issue #1545
[Pregunta] ¿Cómo consigo identificación de Block?
Hola, tengo mi bloque y recibo resultados de impresión en Div ID de mi componente de clase javascript... ¿Cómo consigo identificación de mi...
Issue #792
La propiedad de script usando función no funciona con bloques
En la documentación de Componentes & JS hay este ejemplo: Esto funciona perfectamente. Pero no podría usar una función en lugar de una cade...
Issue #1471
[Pregunta] Gestor de bloques e imagen
¡Hola! Uso este código para añadir un nuevo bloque: blockManager.add("image", { etiqueta: 'Image', categoría: 'Básico', atributos: { clase:...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.