GrapesJS is an open-source, Web Builder Framework to build HTML templates without any knowledge of coding.

Some tips for customizing GrapesJS Editor:

1. To add custom blocks in block manager.
Add this code to block manager json with other blocks:

{
id: 'signature',
label: 'Signature',
category: 'Basic',
attributes: {class:'fa fa-pencil-square'},
content: '<button id="btn1" ondblclick=parent.add_signs(this);><div style="pointer-events:none;width:200;height:30;background-color:black;color:white;text-align:center;vertical-align: middle;line-height: 30px;">Double click to add signatures</div></button><div><div>',

2. To add buttons on the upper bar with buttons like a preview, undo, redo, etc.
Sometimes we want custom buttons like to save the content in a database so we can add them like this:

{
id: 'save',
className: 'fa fa-save icon-undo',
run: function(editor,sender)
{
if(sender) sender.set('active',false);
savecontent();
},
command:  function(editor,sender)
{
if(sender) sender.set('active',false);
savecontent();
},
attributes: { title:'Save'}
}

Where savecontent() is a function which executes PHP script to save content in a database with ajax call.

3.  How to create our own commands and run them from anywhere in the code.

For example, this is code for autosave feature:

{
id: 'autosavekeyup',                //key name
run: function(editor)
{
var timer;
editor.Canvas.getBody().addEventListener('keyup', function(e) 
{
timer && clearTimeout(timer);
timer = setTimeout(function()
{
savePageContent();
},500);
});}
}

To run this key in:

editor.runCommand('autosavekeyup');

4. How to override the functionality of GrapesJS commands.

For example, adding code to delete element from the database also at the time they get deleted from the editor:

cmd = editor.Commands;
cmd.add('tlb-delete', {
run:  function(editor, sender){
//Add custom code here
if (!e || !e.get("removable")) return void console.warn("The element is not removable");
editor.select(null);
e.destroy();
editor.trigger("change:canvasOffset");
},
stop:  function(editor, sender){
},
});
editor.render();

Here ‘tlb-delete’ is inbuilt grapesJS command that runs when a user deletes any element from the editor. So to override it with the custom code we add our code in a run method. If we also want that this command will not lose its previous functionality, we have to add code that is contained in grapesJS run function of that command, like we  have added following standard code also above:

if (!e || !e.get("removable")) return void console.warn("The element is not removable");
editor.select(null);
e.destroy();editor.trigger("change:canvasOffset");

5. How to add whole section with blocks in block manager:

var bm = editor.BlockManager;
bm.add('policy-info', {
id: 'pi1',
label: 'Policy Number',
category: 'Policy Information',
attributes: {class:'fa fa-file-powerpoint-o'},
content: {
editable: false,
droppable: true,
type:'text',
Content:policyinfo['0'],  //to be added on editor when this block is dropped on editor
style: {padding: '10px' },
activeOnRender: 1}
});

6.GrapesJs not working in IE: This is because GrapesJS min.js file is using some functions/methods that are not supported by every browser.IE does not support some methods, so we have to add Polyfill methods which are the methods used to replace methods according to the browsers. Errors that I get are for ‘assign’ method and ‘matches’ method. I added polyfill for these methods and now it is working fine in IE too.
Here is the code I added for ‘assign’ method in the .js file I am using:

if (typeof Object.assign != 'function')
{
Object.defineProperty(Object, "assign", 
{
value: function assign(target, varArgs) 
{
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource != null) {
for (var nextKey in nextSource) {
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}}
}
}
return to;
},
writable: true,
configurable: true
});
}

and here is the code I added before the use of ‘matches’ function in grapes.min.js(This is just an if block, not a polyfill):

if (!object.matches)
object.matches = object.msMatchesSelector || object.webkitMatchesSelector;

As IE does not support these methods so before using matches function in grapes.min.js, we are going to check if any object.matches method exists. If not then define object.matches with object.msMatchesSelector(this is supported by IE instead of matches).