How to change toolbar background color in jodit-react
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 406
- Forks
- 131
- Avg merge
- 2h 32m
- Merged PRs (30d)
- 2
Description
I'm using jodit-react editor. Honestly the documentation is confusing a bit. This is my current config to add custom style to the WSYIWYG editor but I'm not able to change the background-color and the text-color for the toolbar.
const config = {
readonly: false, // all options from https://xdsoft.net/jodit/doc/
height: '450px',
width: '100%',
enableDragAndDropFileToEditor: true,
buttons: [
'source',
'|',
'bold',
'italic',
'underline',
'|',
'ul',
'ol',
'|',
'font',
'fontsize',
'brush',
'paragraph',
'|',
'image',
'table',
'link',
'|',
'left',
'center',
'right',
'justify',
'|',
'undo',
'redo',
'|',
'hr',
'eraser',
'fullsize',
],
uploader: { insertImageAsBase64URI: true },
removeButtons: ['brush', 'file'],
showXPathInStatusbar: false,
showCharsCounter: false,
showWordsCounter: false,
toolbarAdaptive: true,
toolbarSticky: true,
style: {
background: '#27272E',
color: 'rgba(255,255,255,0.5)',
},
};
Also for the onChange method I wrapped the editor component inside useMemo to prevent multiple re-renders as mentioned in this thread : https://github.com/jodit/jodit-react/issues/43 #43
Current Look:

Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the jodit-react configuration shown in the issue and the linked Jodit documentation, then read the related issue #43 for wrapper behavior. Determine the documented way to style the toolbar background and text, or confirm that the current configuration cannot do so; update the documentation or clarify the limitation accordingly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- documentation, frontend
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100