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

| Name | Description | Type | | ----- | -------------------------------------------------------------------- | ----------- | | value | Is the main prop responsible for controlling the value of the editor | EditorState |

Other Props

| Name | Description | Type | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | onChange | Function triggered on every editor change. Useful for updating editor value. | function | | onBlur | Function trigger when editor loses focus. Useful for validation purposes. | function | | maxLength | Number used to specify the maximum length allowed for value. Default value is -1. | number | | readOnly | Toggle used to control if the value is editable or not. Also removes footer and header. Useful for displaying stored values. Default value is false. | number | | maxLength | Number used to specify the maximum length allowed for value. Default value is -1. | number | | className | String which can contain your CSS classes allowing for style customization | string | | name | Attribute applied to the root of the editor. Useful for selecting element via querySelector | string | | error | Toggle used to notify user if entered value is invalid | boolean | | error | Toggle used to notify user if entered value is invalid | boolean | | removeScroll | Removes maximum height limitation for the editor. Default value is false. | boolean | | showHeadingButtons | Removes header from the editor. Default value is false. | boolean | | borderLess | Removes border from the editor. Default value is false. | boolean | | variables | Is an optional array of variables in the format of {value: '{{ custom_variable }}', id: 1}. Upon insertion of a variable the user will see the variable in a Material Chip with the text Custom variable. Useful for filling value with dynamic values after submission | array |