Issue #3046Opened September 24, 2020by jesusdp1 reactions

QUESTION: How to keep default sections in the canvas without the possibility to be removed by the user?

Question

I want to generate a PDF Tool to have three main sections: HEADER, BODY and FOOTER. The three sections needs to be there always and I want to disable the possibility to allow the users to delete those sections. The rest of the components like images, text, columns, etc. needs to be editable like remove them if the user want to do that.

<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">

Answers (2)

MartinPutzSeptember 27, 20201 reactions

By default all components are removable, so that's already covered. In terms of not allowing certain components to be removed, you can take a look at the component api:https://grapesjs.com/docs/api/component.html#component

You would need to set 'removable':false for your three containers.

editor.DomComponents.addType('Header', {
	model: {
		defaults: {
			tagName: 'div',
                        // Component won't be removable
                       removable:false
		}
	},
	view: {
		tagName: 'div',
		onRender() {

		}
	}
});

Adding components during initialization:

const requiredComps = [{
 type: 'Header',
...
},{
 type: 'Body',
...
},{
 type: 'Footer',
...
}];
const editor = grapesjs.init({
   components: requiredComps
});

Another approach: If you are creating a new 'PDF' always add those three components https://grapesjs.com/docs/api/editor.html#setcomponents

editor.setComponents([{
 type: 'Header',
...
},{
 type: 'Body',
...
},{
 type: 'Footer',
...
}]);

If you have an event for creating a new pdf in your custom app that's a good way to attach this logic, if not you could add this logic after the editor is loaded and you could check for an 'empty' project. Events:https://grapesjs.com/docs/api/editor.html#available-events

// Run after the editor is laoded
editor.on('load', (some, argument) => {
   // There are no components(empty PDF), so add the necessary containers
   if(editor.getComponents().models.length === 0){
         editor.setComponents({
              type: 'Header',
              ...
          },{
              type: 'Body',
              ...
          },{
              type: 'Footer',
              ...
         });
   }
});
jesusdpSeptember 30, 20200 reactions

By default all components are removable, so that's already covered. In terms of not allowing certain components to be removed, you can take a look at the component api:https://grapesjs.com/docs/api/component.html#component

You would need to set 'removable':false for your three containers.

editor.DomComponents.addType('Header', {
	model: {
		defaults: {
			tagName: 'div',
                        // Component won't be removable
                       removable:false
		}
	},
	view: {
		tagName: 'div',
		onRender() {

		}
	}
});

Adding components during initialization:

const requiredComps = [{
 type: 'Header',
...
},{
 type: 'Body',
...
},{
 type: 'Footer',
...
}];
const editor = grapesjs.init({
   components: requiredComps
});

Another approach: If you are creating a new 'PDF' always add those three components https://grapesjs.com/docs/api/editor.html#setcomponents

editor.setComponents([{
 type: 'Header',
...
},{
 type: 'Body',
...
},{
 type: 'Footer',
...
}]);

If you have an event for creating a new pdf in your custom app that's a good way to attach this logic, if not you could add this logic after the editor is loaded and you could check for an 'empty' project. Events:https://grapesjs.com/docs/api/editor.html#available-events

// Run after the editor is laoded
editor.on('load', (some, argument) => {
   // There are no components(empty PDF), so add the necessary containers
   if(editor.getComponents().models.length === 0){
         editor.setComponents({
              type: 'Header',
              ...
          },{
              type: 'Body',
              ...
          },{
              type: 'Footer',
              ...
         });
   }
});

It works like a magic! Thanks for your help @MartinPutz ! I'm really appreciate it.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.