React Jodit WYSIWYG Editor

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.