• Jodit
  • PRO
  • Builder
  • Getting Started
  • Playground
  • Examples
  • Documentation
  • Download
  • Jodit
  • Examples
  • © 2025 XDSoft.net
  • site v.0.1.810
  • Jodit v.4.6.2
Modules
Filebrowser module without Jodit
Custom module

Sizes
Autosize
Fixed height

Integrations
Joomla Component Jodit WYSIWYG
Angular Component Jodit WYSIWYG
React JS Jodit WYSIWYG
Integration with ElFinder
Jodit in Yii2
Integrate filebrowser in Joomla CMS

Theme
Drak or custom theme

Edit modes
Source mode
Read only
Read only

Plugins
Create custom plugin

Customization
Keyboard shortcuts

Toolbar
Small Icons
Large Icons
Text Icons
Custom icons / Use Font awesome
Custom button

React Jodit WYSIWYG Editor

npm npm npm

React wrapper for Jodit

Jodit React PRO it is an extended version of Jodit React with the same API, but with a lot more features.

Installation

npm install jodit-react --save
Copy

Update editor version

npm update jodit-react
Copy

Run demo

npm install --dev npm run demo
Copy

and open

http://localhost:4000/

Usage

1. Require and use Jodit-react component inside your application.

import React, { useState, useRef, useMemo } from 'react'; import JoditEditor from 'jodit-react'; const Example = ({ placeholder }) => { const editor = useRef(null); const [content, setContent] = useState(''); const config = useMemo( () => ({ readonly: false, // all options from https://xdsoft.net/jodit/docs/, placeholder: placeholder || 'Start typings...' }), [placeholder] ); return ( <JoditEditor ref={editor} value={content} config={config} tabIndex={1} // tabIndex of textarea onBlur={(newContent) => setContent(newContent)} // preferred to use only this option to update the content for performance reasons onChange={(newContent) => {}} /> ); };
Copy

License

This package is available under MIT License.

;