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 --save

Props

| 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"));