html页面嵌入markdown,在自己的网页中引入MarkDown编辑器

我的环境：react+webpack

首先安装 marked 模块

npm install marked --save

在需要编辑器的页面中引入该模块

import marked from 'marked';

marked可以将MarkDown的语法转化为对应的HTML形式并显示在页面上

/*** Created by lmy on 17-8-15. */

import React from 'react';

import marked from 'marked';

import '../../css/edit.css';

class Edit extends React.Component {

constructor() {

super();

this.state = {renderedContent: ''}

}

handelContentChange(e) {

this.setState({

renderedContent: marked(e.target.value)

})

}

handelTitleChange(e) {

this.setState({

ren: marked(e.target.value)

})

}

render() {

return (

dangerouslySetInnerHTML={{__html: this.state.ren}}/>

dangerouslySetInnerHTML={{__html: this.state.renderedContent}}/>

)

}

}

export default Edit;

下边是MarkDown的运行例子