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

短命女 2022-11-06 03:57 382阅读 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

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

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’

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

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

// Finish!
function handleEditorChange({html, text}) {
console.log(‘handleEditorChange’, html, text)
}
export default (props) => {
return (
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

发表评论

表情：
评论列表 （有 0 条评论，382人围观）

还没有评论，来说两句吧...

相关阅读

    相关 好用的Markdown编辑器一览

    　Markdown 是一种简单的、轻量级的标记语法。用户可以使用诸如 \ \ 等简单的标记符号以最小的输入代价生成极富表现力的文档。 　　Markdown具有很多优点：

    小咪咪小咪咪/ 0 赞/ 346 阅读