Simple React Markdown Editor
This makes it easy to add a simple markdown editing widget to any TextArea element.
Demo
Installation
npm install react-simple-markdown-editor
Features
- Entirely customizable. Modify CSS easily with props, or add custom classes and modify CSS with stylesheets. Define which buttons are visible.
- The only package dependencies are
react
andlodash
, minimizing risk.
Usage
In your code:
ES6:
;
Non-ES6:
var SimpleMarkdownEditor = ;
In your React render()
function:
<SimpleMarkdownEditor textAreaID={"myTextAreaElement"} />
Rendering Markdown
Use another library like react-remarkable in combination with this. Then set the source
of the remarkable component to the value of your TextArea element.
API
Props:
SimpleMarkdownEditorpropTypes = // Required props textAreaID: PropTypesstringisRequired // Optional props styles: PropTypesobject containerClass: PropTypesstring buttonClass: PropTypesstring enabledButtons: PropTypesobject buttonHtmlText: PropTypesobject additionalProps: PropTypesobject;
textAreaID
(String, Required): The ID of the TextArea element you want the editor attached to. When you press buttons in this widget, the text in this TextArea will be modified.
styles
: (Object, optional): Used to overwrite inline CSS without using your own stylesheets.
Existing properties:
container: button: fontFamily: 'Georgia, serif' backgroundColor: '#333536' color: 'white' marginRight: '5px' float: 'left' width: '25px' borderRadius: '4px' textAlign: 'center' cursor: 'pointer'
For instance, if you want to add a border to each button:
<SimpleMarkdownEditor styles={{button: {border: '1px solid green'}}} />
containerClass
and buttonClass
(String, optional): Provide classes to the container and button elements, so you can overwrite them using your own CSS stylesheets. An alternative to setting the styles
prop.
enabledButtons
: (Object, optional): Hide any buttons you don't want to show. All of them default to showing. Buttons:
bold: true italic: true strike: true code: true quote: true h1: true h2: true h3: true bullet: true link: true image: true
For instance, if you want to hide the link button:
<SimpleMarkdownEditor enabledButtons={{link: false}} />
buttonHtmlText
: (Object, optional): Change the display text of any buttons, including any HTML markup. Defaults:
bold: 'B' italic: '<i>I</i>' strike: '<s>S</s>' code: '< >' quote: '“ ”' h1: 'H1' h2: 'H2' h3: 'H3' bullet: '•' link: '#' image: '[i]'
For instance, if you want to change code
to be a square quote
to be 2 right arrows:
<SimpleMarkdownEditor buttonHtmlText={{code: '□', quote: '⇉'}} />
additionalProps
: (Object, optional): Add arbitrary props to any button. For instance:
<SimpleMarkdownEditor additionalProps={{bold: {title: "bold"}}} />
License
MIT, use for free. If you like this, give it a star.