material-rte v1.0.1

Material RTE

A Rich Text Editor made for applications built using React and using Material UI (v4). A potential alternative to CKEditor, TinyMCE and other rich text "WYSIWYG" editors. Based on Draft.js which is maintained by Facebook.

Demo

Try the editor here: Demo Site

Getting Started

npm install --save material-rte

The main component of this package is the Editor one. It comprises of the base editor from Draft.js, a header which contains several button which you can use to modify selected text and a footer which provides extra info and can be used to toggle scroll.

The value of the editor is controller via the value prop which can be initialized using an empty value or a HTML string. The output of the editor can be obtained in HTML string form by transforming the value via included function.

Example Usage

import React from 'react';
import { Editor, importEditor, exportEditor, createEmptyEditor } from 'material-rte';

class ExampleEditor extends React.Component {
    constructor(props) {
        super(props);

        // INITIALIZE USING BLANK VALUE
        this.state = {
            value: createEmptyEditor(),
        };

        // INITIALIZE USING HTML STRING VALUE
        // this.state = {
        //     value: importEditor('<p>Lorem Ipsum</p>'),
        // };
    }

    handleChange = value => {
        console.log(exportEditor(value)); // PRINTS EDITOR VALUE IN HTML STRING FORM
        this.setState({ value });
    };

    render() {
        return <Editor value={this.state.value} onChange={this.handleChange} name="example-editor" />;
    }
}

API

Required Props

Other Props