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

短命女 2022-11-06 03:57 368阅读 0赞

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

先来看看效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70][]

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][https_github.com_HarryChen0506_react-markdown-editor-lite]

参考资料：

1. [https://harrychen0506.github.io/react-markdown-editor-lite/][https_harrychen0506.github.io_react-markdown-editor-lite]

2. [https://github.com/HarryChen0506/react-markdown-editor-lite][https_github.com_HarryChen0506_react-markdown-editor-lite]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70]: /images/20221023/0a07ca5f247a4a13b94e92e9d3f4ec01.png
[https_github.com_HarryChen0506_react-markdown-editor-lite]: https://github.com/HarryChen0506/react-markdown-editor-lite
[https_harrychen0506.github.io_react-markdown-editor-lite]: https://harrychen0506.github.io/react-markdown-editor-lite/