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)
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',
...
});
}
});
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.
Issue #1096
[FEATURE REQUEST] Support rendering layouts which are not part of the editable content
Basically my use case is that I want to show a whole page - with header, menu(s) and footer - in the editor canvas, but only allow the user...
Issue #2061
[QUESTION] How to place a component at the end of the canvas.
How can I put my footer at the end of the canvas? I want the editor to not allow placing a block/widget below the footer. example
Issue #2552
Only allow one component to be dropped
Sorry for the newbie question, but say I have a text field component and I only want to allow the user to drop a specific number of them in...
Issue #1659
[Question] How to upload PDF and others files - GrapesJS
Hi @artf, I started using your web builder a few days ago and I found it very well done ! I was able to customize it in my own way but I ha...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.