react-jodit-editor
Version:
React WYSIWYG Editor Which Uses Jodit & Jodit-React In A Simplified Component
53 lines (39 loc) • 5.05 kB
Markdown
React WYSIWYG Editor Which Uses Jodit & Jodit-React In A Simplified Component. Offers both predefined and customizable features to easily include in your project with little effort.
Features Include:
- Copy & Pasting HTML content/images to editor.
- Editor is by default, an iframe editor so content will automatically get sanitized and stay inside editor.
- Option to manually upload files from local storage and stored in state to use.
- Option to Drag and drop files on editor which will also add to the stored state for files.
- Fullsize option with close on escape key.
<b>Demo:</b> https://react-jodit-editor.netlify.app/
```bash
npm install react-jodit-editor --save
```
| Prop | Description | Type | Default |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `initialValue` | The initial markdown string | string | "" |
| `darkMode` | Changes theme of editor to dark mode | boolean | false |
| `readOnly` | Turns editor into a viewer | boolean | false |
| `height` | Height of the editor, measure in pixels by default | integer | 600 |
| `customToolbar` | Toolbar options on editor | string | "undo,redo,|,bold,italic,underline,strikethrough,|,font,fontsize,brush,|,indent,outdent,|,ul,ol,|,superscript,subscript,eraser,|,table,|,fullsize,print" |
| `overrides` | Can overwrite any prop in the jodit config see https://xdsoft.net/jodit/doc/options/ | object | undefined |
| `onChange` | Change Event For Editor Text | function | |
| `uploadFiles` | Files can be attached by dropping on editor or manually upload from local storage | function | |
| `files` | State for files to keep track of what is dropped and uploaded to editor can be attached by dropping on editor or manual upload | array | undefined |
```jsx
import HTMLEditor from "react-jodit-editor";
import ReactDOM from "react-dom";
import React, { useState } from "react";
export default function Test() {
let [text, setText] = useState("");
let [files, setFiles] = useState([]);
console.log(files);
console.log(text);
return <HTMLEditor initialValue="Test" onChange={setText} uploadFiles={setFiles} files={files} />;
}
ReactDOM.render(<Test />, document.getElementById("root"));
```