React中使用Markdown编辑器

原创已于 2022-04-12 18:00:43 修改 · 3.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react

于 2022-04-10 09:20:04 首次发布

ThinkPHP 同时被 2 个专栏收录

2 篇文章

订阅专栏

Markdown

1 篇文章

订阅专栏

本文介绍了如何在React应用中添加Markdown编辑器，包括安装marked、for-editor和highlight.js插件，设置marked选项以实现代码高亮，并展示了如何处理编辑器的变更事件及保存Markdown内容为HTML。

前言

因为之前写过一个自己的博客，其中编辑文章使用的是富文本编辑器，后来用到Markdown编辑，感觉要比富文本更好用，这里简单记录一下如何在React中添加Markdown编辑器。

一安装

这里我们选择安装以下几个插件

npm install marked // 解析Markdown为HTML
npm install for-editor // Markdown编辑器
npm install highlight.js // 代码高亮

二使用

marked.setOptions({
    renderer: new marked.Renderer(),
    highlight: function(code, lang) {
      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
      return hljs.highlight(code, { language }).value;
    },
    langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
    pedantic: false,
    gfm: true,
    breaks: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false
});

const [mdContent, setMdContent] = useState('')
function handleEditorChange(value) {
  setMdContent(value)
}
<Editor value={mdContent} onChange={handleEditorChange}  />