jodit / jodit/jodit-react

How to change toolbar background color in jodit-react

Open
#120 3 comments 0 reactions 0 assignees View on GitHub

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:
image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.