React实现markdown编辑器

需求

用React实现一个Markdown解析页面,markdown编译可通过marked实现。
效果图

在线预览

在线预览

实现思路

这里要求能根据输入的markdown格式文本进行实时预览,可以将程序主体分割为用于输入markdown文本的div(markdown-src)和用于显示文本的div(markdown-des)两部分组成。

  1. 定义类MarkdownPreview

    1
    class MarkdownPreview extends React.Component
  2. 为其设置一个state-value,用于记录输入的文本

    1
    2
    3
    4
    5
    6
    7
    constructor(props){
    super(props);
    this.state = {
    value: '# hello, This is Markdown Live Preview\n\n----\n## what is Markdown?\nsee [Wikipedia](http://en.wikipedia.org/wiki/Markdown)'
    }
    ...
    }
  3. 需要能够实时预览,可以给页面一个textarea并设定onChanage函数,每次内容改变时都更新vlaue的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    handleChange(event) {
    this.setState({value: event.target.value});
    }
    ...
    render() {
    return (...
    <textarea type="text" onChange={this.handleChange} value={this.state.value}></textarea>
    ...)
    ...
  4. 设置一个用于显示输出的文本框

    1
    2
    3
    4
    5
    6
    7
    8
    9
    createMarkdownPreview() {
    return {__html: marked(this.state.value)};
    }
    ...
    render() {
    return (...
    <div dangerouslySetInnerHTML={this.createMarkdownPreview()}></div>
    ...)
    ...
  5. this绑定-别忘了手动通过bind绑定this

    1
    2
    3
    4
    5
    6
    constructor(props){
    ...
    this.handleChange = this.handleChange.bind(this);
    this.createMarkdownPreview = this.createMarkdownPreview.bind(this);
    ...
    }
  6. 渲染元素

    1
    2
    3
    4
    5
    6
    ...
    ReactDOM.render(
    <MarkdownPreview />,
    document.getElementById('content')
    );
    ...

其他

  • React中对class的命名:class在js中是关键字,react中定义标签类名应使用className
  • 定义标签中的内容:采用dangerouslySetInnerHTML实现,将一个js对象赋值给dangerouslySetInnerHTML,标签中的html为对象中key为__html的内容

源码地址

代码放在了github上,点击参考->地址

参考链接:
React 入门实例教程
React-菜鸟教程

本文首发于http://www.miaoyunze.com/,转载请注明出处