在项目开发经常会用到markdown编辑器,来实现丰富的文档操作,今天来说一下react-mde的使用方法
先说一下常用的react-mde: gitHub地址
react-mde ^5.8.0
react-mde ^6.0.0
ps: ^6.0.0版本是本博客在写作时候的更新到的最新版本,与之前的5.8.0版本相比差别还是很大的
npm install react-mde showdown draft-js --save
markdown
转换位html
的工具npm install react-mde@5.8.0 --save
放在head标签内部
)<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
import 'react-mde/lib/styles/css/react-mde-all.css';
import React from 'react';
import ReactMde, { ReactMdeTypes } from 'react-mde';
import * as Showdown from 'showdown';
class Markdown extends React.Component {
constructor(props) {
super(props);
this.state = {
mdeState: {
markdown: '*这是一段markdown*'
}
}
this.converter = new Showdown.Converter({
tables: true,
simplifiedAutoLink: true,
strikethrough: true,
tasklists: true,
});
}
render() {
return (
<ReactMde
layout="horizontal"
editorState={this.state.mdeState}
generateMarkdownPreview={markdown =>
Promise.resolve(this.converter.makeHtml(markdown))
}
onChange={(mdeState: ReactMdeTypes.MdeState) => {
this.setState({ mdeState });
}}
/>
)
}
}
以上就是react-mde ^5.8.0版本
的全部使用方法了
ps: 至于6.0.0版本的gitHub上面写的非常清楚,请参考上述gitHub地址
PS:以下是我的个人博客小站,欢迎关注哦
戳我戳我