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

``bash
npm install jodit-react --save
`

Update editor version

`bash
npm update jodit-react
`

Run demo

`bash
npm install --dev
npm run demo
`

and open

`
http://localhost:4000/
`

Usage

$3

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

$3

You can use all Jodit features and write your own plugin for example.

`js
import JoditEditor, { Jodit } from 'jodit-react';

/**
* @param {Jodit} jodit
*/
function preparePaste(jodit) {
jodit.e.on(
'paste',
e => {
if (confirm('Change pasted content?')) {
jodit.e.stopPropagation('paste');
jodit.s.insertHTML(
Jodit.modules.Helpers.getDataTransfer(e)
.getData(Jodit.constants.TEXT_HTML)
.replace(/a/g, 'b')
);
return false;
}
},
{ top: true }
);
}
Jodit.plugins.add('preparePaste', preparePaste);

//...
return ;
`

You can see how to write plugins in the documentation or on the stand

Use with Jodit PRO

You can connect any Jodit constructor and set it as the JoditConstructor property of the component.

`jsx
import React from 'react';
import JoditEditor from 'jodit-react';
import { Jodit } from 'jodit-pro';
import 'jodit-pro/es5/jodit.min.css';
// ...

function App() {
return ;
}
`

$3

`js
import dynamic from 'next/dynamic';

const JoditEditor = dynamic(() => import('jodit-react'), {
ssr: false
});
`

License

This package is available under MIT` License.