React中markdown编辑器react-mde多版本的使用

概述

在项目开发经常会用到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
  

• 作用
  react-mde就是所需要的markdown编辑器
  showdown是一个将markdown转换位html的工具

以下介绍5.8.0版本的使用

npm install react-mde@5.8.0 --save

• 引入js文件，一般是在index.html文件里面,(放在head标签内部)
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
• 引入css文件，一般在项目的入口文件处导入
  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：以下是我的个人博客小站，欢迎关注哦
戳我戳我