Md编辑器整合-react

推荐md编辑器 - ByteMD在线体验ByteMD Playgroundgit 链接GitHub - pd4d10/bytemd: ByteMD v1 repository安装编辑器本体pnpm install bytemd/react官方插件 - 代码高亮 支持 GFM 功能自动链接文字、删除线、表格、任务列表等pnpm install bytemd/plugin-highlight bytemd/plugin-gfmMdEditor 组件import gfm from bytemd/plugin-gfm import { Editor } from bytemd/react import highlight from bytemd/plugin-highlight import bytemd/dist/index.css import highlight.js/styles/vs.css import ./github-markdown-light.css import ./index.css interface Props { value?: string onChange?: (value: string) void placeholder?: string } const plugins [gfm(), highlight()] /** * 编辑器 * param props * constructor */ const MdEditor (props: Props) { const { value , onChange, placeholder } props return ( Editor classNamemd-editor value{value} placeholder{placeholder} modesplit plugins{plugins} onChange{onChange} / ) } export default MdEditorMdViewer 组件import gfm from bytemd/plugin-gfm import { Viewer } from bytemd/react import highlight from bytemd/plugin-highlight import bytemd/dist/index.css import highlight.js/styles/vs.css import ../MdEditor/github-markdown-light.css import ./index.css interface Props { value?: string } const plugins [gfm(), highlight()] /** * Md 浏览器 * param props * constructor */ const MdViewer (props: Props) { const { value } props return ( div classNamemd-viewer Viewer value{value} plugins{plugins} / /div ) } export default MdViewer引入 github markdown 样式github 地址GitHub - sindresorhus/github-markdown-css: The minimal amount of CSS to replicate the GitHub Markdown style · GitHub测试在全局基础布局组件引入编辑器组件进行效果测试use client import { ProLayout } from ant-design/pro-components import { Dropdown, Input } from antd import React, { useEffect, useState } from react import MdEditor from /components/MdEditor import MdViewer from /components/MdViewer interface props { children: React.ReactNode } export default function BasicLayout({ children }: props) { const [text, setText] useStatestring() ... return ( div idbasic-layout style{{ height: 100vh, }} ProLayout ... MdEditor value{text} onChange{setText} / MdViewer value{text} / {children} /ProLayout /div ) }效果图