jodit-react

Jodit is awesome and usefully wysiwyg editor with filebrowser

Usage no npm install needed!

<script type="module">
  import joditReact from 'https://cdn.skypack.dev/jodit-react';
</script>

README

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

Update editor version

npm update jodit-react

Run demo

npm install --dev
npm run demo

and open

http://localhost:4000/

Usage

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

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

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

    const config = {
        readonly: false // all options from https://xdsoft.net/jodit/doc/
    }

    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 MIT License.