React Jodit PRO WYSIWYG Editor

React wrapper for Jodit PRO

Installation

npm install jodit-pro-react --save
# or
yarn add jodit-pro-react

Update editor version

npm update jodit-react-pro

Usage

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

import React, {useState, useRef} from 'react';
import JoditEditor from "jodit-pro-react";

const Example = ({}) => {
    const editor = useRef(null)
    const [content, setContent] = useState('')

    const config = {
        readonly: false, // all options from https://xdsoft.net/jodit/docs/,
        uploader: {
            url: 'https://xdsoft.net/jodit/finder/?action=fileUpload'
        },
        filebrowser: {
            ajax: {
                url: 'https://xdsoft.net/jodit/finder/'
            },
            height: 580,
        }
    }

    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 => {}}
        />
    );
}

License

This package is available under License.