Online demo
https://harrychen0506.github.io/react-markdown-editor-lite/
Default configuration
Pluggable bars
npm install react-markdown-editor-lite --save
# or
yarn add react-markdown-editor-lite
Following steps:
// import react, react-markdown-editor-lite, and a markdown parser you like
import React from 'react';
import * as ReactDOM from 'react-dom';
import MarkdownIt from 'markdown-it';
import MdEditor from 'react-markdown-editor-lite';
// import style manually
import 'react-markdown-editor-lite/lib/index.css';
// Register plugins if required
// MdEditor.use(YOUR_PLUGINS_HERE);
// Initialize a markdown parser
const mdParser = new MarkdownIt(/* Markdown-it options */);
// Finish!
function handleEditorChange({ html, text }) {
console.log('handleEditorChange', html, text);
}
export default props => {
return (
<MdEditor style={{ height: '500px' }} renderHTML={text => mdParser.render(text)} onChange={handleEditorChange} />
);
};
If you are using a server-side render framework, like Next.js, Gatsby, please use client-side render for this editor.
For example, Next.js has next/dynamic, Gatsby has loadable-components
Following is a example for Next.js:
import dynamic from 'next/dynamic';
import 'react-markdown-editor-lite/lib/index.css';
const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
ssr: false,
});
export default function() {
return <MdEditor style={{ height: '500px' }} renderHTML={/* Render function */} />;
}
With plugins:
import dynamic from 'next/dynamic';
import 'react-markdown-editor-lite/lib/index.css';
const MdEditor = dynamic(
() => {
return new Promise(resolve => {
Promise.all([
import('react-markdown-editor-lite'),
import('./my-plugin'),
/** Add more plugins, and use below */
]).then(res => {
res[0].default.use(res[1].default);
resolve(res[0].default);
});
});
},
{
ssr: false,
},
);
export default function() {
return <MdEditor style={{ height: '500px' }} renderHTML={/* Render function */} />;
}
Full example see here
Since 1.1.0, You can add script
and link
tags in your browser and use the global variable ReactMarkdownEditorLite
.
You can download these files directly from
Note: you should import react before ReactMarkdownEditorLite
.
For example, in webpack, you import ReactMarkdownEditorLite by script
tag in your page, and write webpack config like this:
externals: {
react: 'React',
'react-markdown-editor-lite': 'ReactMarkdownEditorLite'
}