1.1.0 • Published 4 years ago
react-jodit-editor v1.1.0
React-Jodit-Editor
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.
Demo: https://react-jodit-editor.netlify.app/
Installation
npm install react-jodit-editor --saveProps
| 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 |
Example
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"));