wer

wysiwyg-editor-react

WYSIWYG Editor for ReactJS .13+

Showing:

Popularity

Downloads/wk

59

GitHub Stars

5

Maintenance

Last Commit

3yrs ago

Contributors

1

Package

Dependencies

2

License

ISC

Type Definitions

Tree-Shakeable

No?

Readme

WYSIWYG EDITOR For ReactJS .13+

This component allows users to enter text and style text using common styling techniques, such as Bold, Italic, Underline, etc.

You can look at the example folder to get an understanding of implementing this editor.

Install

$ npm install wysiwyg-editor-react

Include

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

Usage

var React = require( 'react' );
var Editor = require( 'wysiwyg-editor-react' );

var Example = React.createClass( {
  getInitialState: function () {
    return {
      text: '<b>WYSIWYG Editor</b> For <a href="http://www.reactjs.com">ReactJS</a>.'
    }
  },
  onTextUpdate: function ( val ) {
    this.state.text = val;
    this.forceUpdate();
  },
  render: function () {
    return (
      <div>
        <Editor className="well" html={this.state.text} update={this.onTextUpdate} />
        {this.state.text}
      </div>
    )
  }
} );

module.exports = Example;

Options

  • You can list the buttons you want shown in the toolbar by passing in an array to toolbar_buttons. e.g. [ 'bold', 'italic', 'underline', 'list', 'link', 'justifyLeft', 'justifyCenter','justifyRight', 'justifyFull', 'image' ]
  • You can hide the toolbar by setting show_toolbar to false (allowing you to create your own buttons and call the editor's functions yourself.)
  • You can pass in className to change the editable div's class for styling purposes
  • You can pass in style to change style of editable div. ( defaults maxHeight to 300px and overflow to scroll )

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
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial