react-jodit-editor

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