在自己的网页中引入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 (
            <div>
                <div className="editArea">
                    <textarea className="editTitle" onChange={this.handelTitleChange.bind(this)}/>

                    <textarea className="edit" onChange={this.handelContentChange.bind(this)}/>

                </div>

                <div className="show">
                    <div className="showTitle">
                        <div className='markdown-rendered-contect'
                             dangerouslySetInnerHTML={{__html: this.state.ren}}/>
                    </div>

                    <div className="showText">
                        <div className='markdown-rendered-contect'
                             dangerouslySetInnerHTML={{__html: this.state.renderedContent}}/>
                    </div>

                </div>

            </div>
        )
    }
}
export default Edit;

下边是MarkDown的运行例子