react-markdown-editor

A markdown editor using React/Reflux.

WARNING: still betaish.

TLDR

Demo here: http://jrm2k6.github.io/react-markdown-editor/

Installation

npm install --save react-markdown-editor

Features

From the UI:

• Bold
• Italic
• Header
• Subheader
• Link
• Unordered List
• Inline Images

Of course it is a regular markdown editor (using the nice markdown-js library), so you are not limited to the UI.

Usage

To render the component:

var React = require('react');
var MarkdownEditor = require('react-markdown-editor').MarkdownEditor;

var TestComponent = React.createClass({
    render: function() {
        return (
            <MarkdownEditor initialContent="Test"/>
        );
    }
});

React.render(<TestComponent />, document.getElementById('content'));

<MarkdownEditor /> has only one prop, the initial content of the textarea.

You can also listen to content changes on the editor. If you are using Reflux, by listening to the changes on MarkdownEditorContentStore. To be able to do so, just require('react-markdown-editor').MarkdownEditorContentStore;

Dependencies

You can modify the styles directly by modifying the styles declared in dist/MarkdownEditor.js. The pre-existing styles assume that you are using Bootstrap and Font Awesome.

TODO

• [x] Cross-browsers issues
• [ ] Better solution for styles
• [x] Upgrade to React 0.13
• [x] Unit testing
• [ ] Cross-browsers testing

Issues/Contribution

You can open an issue on the github repo, or contact me directly by email.

Screenshots