Jodit is awesome and usefully wysiwyg editor with filebrowser
npm install jodit-react


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.
``bash`
npm install jodit-react --save
`bash`
npm update jodit-react
`bash`
npm install --dev
npm run demo
and open
``
http://localhost:4000/
`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 (
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 => {}}
/>
);
};
`
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
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
}
`
`js
import dynamic from 'next/dynamic';
const JoditEditor = dynamic(() => import('jodit-react'), {
ssr: false
});
`
This package is available under MIT` License.