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 [email protected] --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地址