React好用的markdown编辑类库包 react-markdown-editor-lite

今天给大家介绍一个好用的编辑类第三方库 react-markdown-editor-lite 功能强大，使用简单

先来看看效果图：

 

1. 使用npm安装包

npm install react-markdown-editor-lite

npm install markdown-it

2. 在程序中引入相关内容

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import MarkdownIt from 'markdown-it'
import MdEditor from 'react-markdown-editor-lite'
import 'react-markdown-editor-lite/lib/index.css'

3. 一个简单的例子，直接拷贝可以使用

const mdParser = new MarkdownIt(/* Markdown-it options */);

// Finish!
function handleEditorChange({html, text}) {    
  console.log('handleEditorChange', html, text)
}
export default (props) => {
  return (
    <MdEditor
      style={{ height: "500px" }}
      renderHTML={(text) => mdParser.render(text)}
      onChange={handleEditorChange}
    />
  )
}

 

详细的配置和API可以查看官方文档：https://github.com/HarryChen0506/react-markdown-editor-lite

 

参考资料：

1. https://harrychen0506.github.io/react-markdown-editor-lite/

2. https://github.com/HarryChen0506/react-markdown-editor-lite