A Markdown Editor with React
react markdown editor
Installation
yarn add react-markdown-editor-cm5
or
npm i react-markdown-editor-cm5
Usage
import MdEditor from 'react-markdown-editor-cm5';
import 'react-markdown-editor-cm5/lib/css/main.min.css';
function App() {
return (
<>
<MdEditor value=""></MdEditor>
</>
);
}
export default App;
API
props
type toolbar = ‘bold’ | ‘checkList’| ‘clear’| ‘codeBlock’| ‘dateTime’| ‘dividing’| ’emoji’| ‘fullScreen’| ‘header’| | ‘htmlEntities’| ‘humpCase’| ‘image’ | ‘inlineCode’| ‘italic’| ‘link’| ‘lowerCase’| ‘orderedList’| ‘quote’| ‘redo’| ‘undo’| ‘sub’| ‘super’| ‘table’| ‘theme’| ‘through’| ‘toggleEditor’| ‘unOrderedList’| ‘upperCase’
| name | type | default | description |
|---|---|---|---|
| initialValue | string | initial value of editor | |
| width | number | string | ‘100%’ | width of editor |
| height | number | 800 | height of editor, |
| toolbars | Array<toolbar> | all of toolbar | custom toollbar item, if it’s a empty array, editor will hide toolbar |
| toolBarHeight | number | 34 | height editor toolbar |
| onSave | (mdValue?: string, htmlValue?: string): void | callback when editor save | |
| onChange | (mdValue?: string, htmlValue?: string): void | callback when editor content change | |
| uploadImageMethod | (file: string | Blob, insertImageCallback: (fileName: string, imageUrl: string) => void): void; | method of upload image |
example of uploadImageMethod
No matter what your upload method is, you just need call insertImageCallback after your upload method, filename param is the title of image, the imageUrl is the image url after upload
function App() {
const uploadImageMethod: uploadImageMethod = (file, insertImageCallback) => {
const uploadApi = 'http://localhost:8080/upload';
const formData = new FormData();
formData.append('file', file);
fetch(uploadApi, {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) => {
const { imgName, imageUrl } = data;
insertImageCallback(imgName, imageUrl);
})
.catch((error) => {
console.error(error);
});
};
return (
<div style={{ padding: '50px' }}>
<MdEditor
uploadImageMethod={uploadImageMethod}
/>
</div>
);
}
export default App;