当前位置: 首页 > 工具软件 > MDE > 使用案例 >

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

陈畅
2023-12-01

概述

在项目开发经常会用到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:以下是我的个人博客小站,欢迎关注哦
戳我戳我

 类似资料: