How to change the editor default color to some other color in grapesjs in React?-CodePudding

How to change this default color into some other color in grapesjs?

CodePudding user response：

You can change it using the CSS, using red as an example:

.gjs-one-bg { background-color: 'red' }

There is a lot of other classes you can alter as well, use Chrome dev tools to inspect them. Make sure to add !important if the styles don't apply.

CodePudding user response：

In order to change the editor default color in GrapesJS in a React application, you can use the onEditorLoad callback function provided by GrapesJS and use the setStyle method to change the color. Here is an example of how you can do this:

import grapesjs from 'grapesjs';

const editor = grapesjs.init({
    ...
    onEditorLoad(editor) {
        // set the default color to blue
        editor.setStyle('body{color: blue;}');
    }
});

You can also use the editor.on('load', callback) method to make sure that the editor is loaded before you set the style.

CodePudding user response：

You can change the default color by using setCustomCode function to set the css and then call render function.

editor.setCustomCode({
    css: '.gjs-pn-commands { background: blue; }',
});
editor.render();