Issue #3046💬 RespondidoAbierto el 24 de septiembre de 2020por jesusdpReacciones 1

PREGUNTA: ¿Cómo mantener las secciones predeterminadas en el lienzo sin la posibilidad de que el usuario las elimine?

Respuesta rápidapor MartinPutz1

Por defecto, todos los componentes son extraíbles, así que eso ya está cubierto. En cuanto a no permitir que ciertos componentes se eliminen, puedes echar un vistazo a la API de componentes: https://grapesjs.com/docs/api/component.html#component Tendrías que configurar 'removible':false para tus tres contenedores. '''...

Lee la respuesta completa abajo ↓

Pregunta

Quiero generar una herramienta PDF que tenga tres secciones principales: MÁS ALTO, CUERPO y PIE de página. Las tres secciones deben estar siempre ahí y quiero desactivar la posibilidad de que los usuarios puedan eliminar esas secciones. El resto de los componentes como imágenes, texto, columnas, etc., deben ser editables, es decir, eliminarlos si el usuario quiere hacerlo.

<img width="1888" alt="Captura de Pantalla 2020-09-24 a la(s) 8 01 30 a m" src="https://user-images.githubusercontent.com/10049157/94148536-5a052180-fe3c-11ea-90af-f94d2a395ebb.png">

Respuestas (2)

MartinPutz27 de septiembre de 2020

Por defecto, todos los componentes son extraíbles, así que eso ya está cubierto. En cuanto a no permitir que ciertos componentes se eliminen, puedes echar un vistazo a la API de componentes: https://grapesjs.com/docs/api/component.html#component

Tendrías que configurar 'removible':false para tus tres contenedores. '''js editor. DomComponents.addType('Header', { modelo: { Predeterminados: { etiquetaNombre: 'div', El componente no se podrá quitar removible:false } }, Vista: { etiquetaNombre: 'div', onRender() {

} } });


Añadir componentes durante la inicialización:
'''js
const requiredComps = [{
 tipo: 'Cabeza',
...
},{
 tipo: 'Cuerpo',
...
},{
 tipo: 'Pie de página',
...
}];
const editor = grapesjs.init({
   componentes: requiredComps
});

Otro enfoque: si estás creando un nuevo 'PDF', siempre añade esos tres componentes https://grapesjs.com/docs/api/editor.html#setcomponents '''js editor.setComponents([{ tipo: 'Cabeza', ... },{ tipo: 'Cuerpo', ... },{ tipo: 'Pie de página', ... }]);


Si tienes un evento para crear un nuevo PDF en tu app personalizada, esa es una buena forma de adjuntar esta lógica; si no, podrías añadirla después de cargar el editor y comprobar si hay un proyecto 'vacío'.
Eventos: https://grapesjs.com/docs/api/editor.html#available-events
'''js
Corre después de que el editor esté publicado
editor.on('load', (some, argument) => {
   No hay componentes (PDF vacío), así que añade los contenedores necesarios
   if(editor.getComponents().models.length === 0){
         editor.setComponents({
              tipo: 'Cabeza',
              ...
          },{
              tipo: 'Cuerpo',
              ...
          },{
              tipo: 'Pie de página',
              ...
         });
   }
});
jesusdp30 de septiembre de 2020

Por defecto todos los componentes son extraíbles, así que eso ya está cubierto. En cuanto a no permitir que ciertos componentes se eliminen, puedes echar un vistazo a la API de componentes: https://grapesjs.com/docs/api/component.html#component

Tendrías que configurar 'removible':false para tus tres contenedores.

'''js editor. DomComponents.addType('Header', { modelo: { predeterminados: { etiquetaNombre: 'div', // El componente no se podrá quitar removible:falso } }, opinión: { etiquetaNombre: 'div', onRender() {

  }

} });


Añadir componentes durante la inicialización:

'''js
const requiredComps = [{
tipo: 'Cabecera',
...
},{
tipo: 'Cuerpo',
...
},{
tipo: 'Pie de página',
...
}];
const editor = grapesjs.init({
componentes: requiredComps
});

Otro enfoque: si estás creando un nuevo 'PDF', añade siempre esos tres componentes https://grapesjs.com/docs/api/editor.html#setcomponents

'''js editor.setComponents([{ tipo: 'Cabecera', ... },{ tipo: 'Cuerpo', ... },{ tipo: 'Pie de página', ... }]);


Si tienes un evento para crear un nuevo PDF en tu app personalizada, esa es una buena forma de añadir esta lógica; si no, podrías añadirla después de cargar el editor y comprobar si hay un proyecto 'vacío'.
Eventos: https://grapesjs.com/docs/api/editor.html#available-events

'''js
// Correr después de que el editor esté laodeado
editor.on('load', (some, argument) => {
// No hay componentes (PDF vacío), así que añade los contenedores necesarios
if(editor.getComponents().models.length === 0){
editor.setComponents({
tipo: 'Cabecera',
              ...
          },{
tipo: 'Cuerpo',
              ...
          },{
tipo: 'Pie de página',
              ...
         });
   }
});

¡Funciona como por arte de magia! ¡Gracias por vuestra ayuda @MartinPutz ! Lo agradezco mucho.

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 →

Explorar categorías de plugins

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