Customize editor by removing all pallets on right and top
Hi @manjunaras , For css, GrapesJS provides some Sass variables that you can override and change some colors. Here you can check the available sass variables: https://github.com/artf/grapesjs/blob/dev/src/styles/scss/gjsvariables.scss Starting from this API-Editor you can start to save some templates ( from Submit but...
Read full answer below ↓Question
First up all thanks @artf for your wonderful stuff on GrapesJS,
We need to customize complete editor instead of integrating into our app and most important it should be developer friendly in following ways ,
- Reuse editor region for content creation or edition.
- Remove complete CSS and redesign as per our branding themes
- Overriding evenlisteners( e.g., preview, undo/redo,etc.,) from our application (Reinvent in angularjs frontend)
@artf You openion whether it can be possible for above list of points mentioned?
Answers (3)
Hi @manjunaras , For css, GrapesJS provides some Sass variables that you can override and change some colors. Here you can check the available sass variables: https://github.com/artf/grapesjs/blob/dev/src/styles/scss/_gjs_variables.scss
Starting from this API-Editor you can start to save some templates ( from Submit button)
Using the same API you can implement a way to load the template from the templates palletes. Preview mode, should be a little bit harder to achieve but is pretty possible too.
Are you having perfomance issues with GrapesJS ? Why do you want to remove some modules and others not? If you don't use, you can leave them there without problems but if you really need a new grapesjs without some folders, you can clone the code from github and remove what you want.
Hope I could help
Thanks @arthuralmeidap for a good overview.
@manjunaras I'd just add that buttons inside default panels (that you can actually hide) are executing built-in commands, so, for example, if you want to open the modal with HTML code just use runCommand:
editor.runCommand('export-template')
Hi @manjunaras , I'm not @artf but , as far I have been reading about GrapesJS, with it's API , everything you mentioned is possible. Take a look here: https://github.com/artf/grapesjs/wiki
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1836
How to add !important in all the generated apis
Hello @artf, While i am going to edit some html from editor with the help of css then i need to add !important into all the css which is ch...
Issue #1748
How to prevent drag items inside the editor
Hello @artf You are doing great job with grapesjs and it's extremely helpful to make our functionality more user friendly. Thanks for creat...
Issue #1150
[Question] Get Uploads as Base64
Hello All, I need help integrating this into a web app that I have. Everything renders and works as expected but I am trying to get the upl...
Issue #1312
Submission of form in grapesjs
Hi, You build such a beautiful editor with forms and social icons with all stuff thanks for your great work. I build a form with grapesjs h...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.