Install
npm i @uiw/react-markdown-editor
Document
Official document demo preview (🇨🇳中国镜像网站)
Basic Usage
import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';
const Dome = () => (
<MarkdownEditor
value={this.state.markdown}
onChange={this.updateMarkdown}
/>
);
controlled usage
import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor() {
super();
this.state = {
markdown: '# This is a H1 \n## This is a H2 \n###### This is a H6',
};
this.updateMarkdown = this.updateMarkdown.bind(this);
}
updateMarkdown(editor, data, value) {
this.setState({ markdown: value });
}
render() {
return (
<MarkdownEditor
value={this.state.markdown}
onChange={this.updateMarkdown}
/>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
Props
- value (string) - the raw markdown that will be converted to html (required)
-
visble?:boolean
- Shows a preview that will be converted to html. -
toolbars?:array
- Tool display settings. -
toolbarsMode?:array
- Tool display settings. - onChange (function(editor: IInstance, data: CodeMirror.EditorChange, value: string)) - called when a change is made (required)
import requests
req = requests.get('https://www.baidu,com')
req.test()
Development
npm run dev
npm run type-check:watch
npm run doc
网友评论