React Jodit PRO WYSIWYG Editor

React wrapper for Jodit PRO

Installation

1npm install jodit-pro-react --save
2# or
3yarn add jodit-pro-react

Update editor version

1npm update jodit-react-pro

Usage

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

1import React, {useState, useRef} from 'react';
2import JoditEditor from "jodit-pro-react";
3
4const Example = ({}) => {
5	const editor = useRef(null)
6	const [content, setContent] = useState('')
7
8	const config = {
9		readonly: false, // all options from https://xdsoft.net/jodit/docs/,
10		uploader: {
11			url: 'https://xdsoft.net/jodit/finder/?action=fileUpload'
12		},
13		filebrowser: {
14			ajax: {
15				url: 'https://xdsoft.net/jodit/finder/'
16			},
17			height: 580,
18		}
19	}
20
21	return (
22		<JoditEditor
23			ref={editor}
24			value={content}
25			config={config}
26			tabIndex={1} // tabIndex of textarea
27			onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
28			onChange={newContent => {}}
29		/>
30	);
31}

License

This package is available under License.