React Markdown Editor,based on CodeMirror,Markdown-It and Prism
npm install react-markdown-mirrornpm install --save react-markdown-mirror
javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Markdown from 'react-markdown-mirror';
ReactDOM.render( , document.getElementById('root'));
`
$3
Name
Type
Value
Discription
title
Boolean
true or false,default true
show or hide
Object
{visible:Boolean,defaultValue:String,maxLength:Number}
set title visible, default value and max length
toolbar
Boolean
true or false,default true
show or hide
defaultValue
String
string
markdown string value
onChange
Function
value=>{}
triggered when you input
debounceTime
Number
number(ms),default 500ms
wait for converting
extra
ReactNode
ReactNode
operating area, at the end of the line of the Toolbar line
containerClassName
String
string
the wrapper classname
inputClassName
String
string
the input area classname
outputClassName
String
string
the output area classname
$3
1.use onChange prop,you can do something on this callback
`javascript
console.log(value)} />
`
2.use ref
`javascript
const App = () => {
const markdown = useRef();
useEffect(() => {
const value = markdown.current.getValue();
console.log(value);
});
return ;
};
`
$3
also use ref
`javascript
const App = () => {
const markdown = useRef();
useEffect(() => {
const defaultTitle = 'default title';
const defaultMarkdown = '# This is default markdown';
markdown.current.setValue({ title: defaultTitle, markdown: defaultMarkdown });
}, []);
return ;
};
``