Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

react-md-editor

React.js Markdown Editor Component

Subscribe to updates I use react-md-editor


Statistics on react-md-editor

Number of watchers on Github 395
Number of open issues 11
Average time to close an issue about 1 hour
Main language JavaScript
Average time to merge a PR 1 day
Open pull requests 6+
Closed pull requests 0+
Last commit almost 3 years ago
Repo Created about 4 years ago
Repo Last Updated over 1 year ago
Size 872 KB
Organization / Authorjedwatson
Contributors3
Page Updated
Do you use react-md-editor? Leave a review!
View open issues (11)
View react-md-editor activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating react-md-editor for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

React Markdown Editor

A Markdown Editor for React.js, built with CodeMirror.

This is a work in progress. Format application and removal is not very robust, some formats are missing.

Demo & Examples

Live demo: JedWatson.github.io/react-md-editor

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

Installation

The easiest way to use codemirror is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).

You can also use the standalone build by including dist/codemirror.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

npm install codemirror --save

Usage

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

var App = React.createClass({
    getInitialState: function() {
        return {
            code: "# Markdown"
        };
    },
    updateCode: function(newCode) {
        this.setState({
            code: newCode
        });
    },
    render: function() {
        return <Editor value={this.state.code} onChange={this.updateCode} />
    }
});

React.render(<App />, document.getElementById('app'));

Properties

  • value String the markdown
  • options Object (newValue) options passed to the CodeMirror instance
  • onChange Function (newValue) called when a change is made

See the CodeMirror API Docs for the available options.

License

MIT. Copyright (c) 2016 Jed Watson.

react-md-editor open issues Ask a question     (View All Issues)
  • over 2 years dist/react-md-editor.js error
  • almost 3 years Support Images and Links
  • almost 4 years Can we have GFM support?
react-md-editor open pull requests (View All Pulls)
  • preventDefault when a button is pushed
  • support react@^15.0.0
  • Link and Image Support
  • button type attribute available in options property
  • Improve document and add custom classname feature
  • Upgrade to new React 15+
react-md-editor list of languages used
Other projects in JavaScript