react-simple-markdown-editor
v1.1.0
Published
Simple markdown editor widget you can attach to any TextArea element to provide rich markdown capabilities. Requires few dependencies
Downloads
12
Maintainers
Readme
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:
import {SimpleMarkdownEditor} from 'react-simple-markdown-editor';
Non-ES6:
var SimpleMarkdownEditor = require('react-simple-markdown-editor');
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:
SimpleMarkdownEditor.propTypes = {
// Required props
textAreaID: PropTypes.string.isRequired,
// Optional props
styles: PropTypes.object,
containerClass: PropTypes.string,
buttonClass: PropTypes.string,
enabledButtons: PropTypes.object,
buttonHtmlText: PropTypes.object,
additionalProps: PropTypes.object
};
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.