React Jodit WYSIWYG Editor

React Jodit WYSIWYG Editor

Excellent Open Source WYSIWYG editor written in pure TypeScript without using additional libraries.

React Jodit WYSIWYG Editor

npm npm npm

React wrapper for Jodit

Installation

npm install jodit-react --save

Update editor version

npm update jodit-react

Run demo

npm install --dev 
npm run demo

and open

http://localhost:4000/

Usage

1. Require and use Jodit component inside your application.

import React from 'react';

import 'jodit';
import 'jodit/build/jodit.min.css';
import JoditEditor from "jodit-react";

class Example  extends Component {
    constructor(props) {
        super(props);
        this.state = {
        	content: 'content',
        }
    }

    updateContent = (value) => {
        this.setState({content:value})
    }
    /**
     * @property Jodit jodit instance of native Jodit
     */
	jodit;
	setRef = jodit => this.jodit = jodit;
	
	config = {
		readonly: false // all options from https://xdsoft.net/jodit/doc/
	}
    render() {
        return (
            <JoditEditor
            	editorRef={this.setRef}
                value={this.state.content}
                config={this.config}
                onChange={this.updateContent}
            />
        );
    }
}

License

This package is available under MIT License.

Github Repository

Tags: #React #Editor