rwe

react-wysiwyg-editor

A bootstrap-style react component for wysiwyg editor

Showing:

Popularity

Downloads/wk

42

GitHub Stars

41

Maintenance

Last Commit

5yrs ago

Contributors

3

Package

Dependencies

1

Size (min+gzip)

7.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

react-wysiwyg-editor

A bootstrap-style react component for wysiwyg editor

I need a wysiwyg editor that play nicely with the way data flow works in react, especially react way of dealing with form. Most of wysiwyg editor implementations out there are jQuery plugins. Of course, you can use them with react application, but it takes more work to make them play well with react component. This is a simple react component, with 184 lines of code, that works like react <input> component.

Demo

https://plnkr.co/edit/sSJfG1L1izDY8BJ1fWpF?p=preview

Install

npm install react-wysiwyg-editor
or
bower install react-wysiwyg-editor

Usage

Font-awesome is used for toolbar icons, so make sure you include its reference inside head tag

Example:

<html>
    <head>
        ...
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
    </head>
    <body>
    ....
    </body>
</html>

Simply require it to use it:

var EditableDiv = require('react-wysiwyg-editor');

Specify initial content in getInitialState:

getInitialState: function() {
    return {
        content: 'initial content'
    };
}

Define change handler:

handleContentChange: function(e) {
    this.setState({content: e.target.value});
}

Compose it in render method:

render: function() {
    // Customize your editor with css rules
    var editorStyle = {
        overflow: 'auto',
        width: 300,
        height: 100,
        maxHeight: 100
    }
    return(
        <div className="form-group">
            <label>Comment:</label>
            <EditableDiv style={editorStyle} content={this.state.content} onChange={this.handleContentChange} />
        </div>
    );
}

That's it for the API! For complete example, please see Example.jsx

License

MIT.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100