How to disable style editor

Question

I am experimenting with grapes js page builder with the webpage plugin.

The issue is that I was not able to find a way to completely disable the style editor they have (I managed to not auto-select the style manager when you click an element) but I want to completely remove the option for the user to edit existing styles.

Basically the user must only be able to drag existing blocks and edit the text inside them and not style them in any way.

score 1 · Accepted Answer · answered Jul 15 '20 at 00:26

1

You can also acheive this by changing the "appendTo" property of the Style Manager config to a new div that's not in the DOM

const editor = grapesjs.init({
 styleManager: {
   appendTo: document.createElement('div'),
 },
 ...
})

This way, the style manager simply won't be rendered.

answered Jul 15 '20 at 00:26

GiorgiosJames

742
7
11

This is actually a better solution than mine. Thank you! – Stem Florin Jul 15 '20 at 06:14

score 0 · Answer 2 · answered Jul 07 '20 at 10:57

The way I solved the issue was by copy & pasting the node_modules/grapesjs-preset-webpage/src/panels/index.js and simply commenting out the code that was defining the panel I wanted to get rid of.

I also had the copy and paste the node_modules/grapesjs-preset-webpage/src/index.js and editing it to import my panels.js file.

Not the best way of doing this for sure but for now that will do.

PS. I also thought of simply hiding the panel using CSS but that seemed more of a hack than this.

I was in fact wrong about abut "hiding it with css" being more of a hack then my solutions :D — Stem Florin, Apr 24 '23 at 07:29

How to disable style editor

2 Answers2