Skip to content

pmyers88/react-wysiwyg-editor

 
 

Repository files navigation

react-wysiwyg-editor

A bootstrap-style react component for wysiwyg editor

I need a wysiwyg editor that works with react coding style, especially react way of dealing with form. Most of wysiwyg editor implementations out there are designed for jQuery or DOM. 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.

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.

About

A bootstrap-style react component for wysiwyg editor

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.9%
  • HTML 0.1%