Customize editor by removing all pallets on right and top
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...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.