react-markdown-editor 是 React.js 和 TypeScript 实现的 Markdown 编辑器。
npm i @uiw/react-markdown-editor
文档实例预览:demo preview (🇨🇳中国镜像网站)
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') );
更多参数设置查看下面网址
npm run dev npm run type-check:watch npm run doc