react中使用markdown组件——react-md-editor

react中使用markdown组件

组件推荐（react-md-editor）：https://github.com/uiwjs/react-md-editor

在项目中使用过后是这样的，左侧内容可以默认，可以手动回填

简单介绍

• 下载依赖

npm i @uiw/react-md-editor

组件引入及使用

• 引入：import MDEditor from ‘@uiw/react-md-editor’;
• 引入左侧写入、右边展示的markdown，属性value为markdown文本

   <MDEditor
        value={value}
        onChange={setValue}
 	/>  

• 预览模式，（markdown文本预览）则传入数据参数为source的markdown文本

 <MDEditor.Markdown source={value} />

自定义toolbar

readme里面介绍了怎么修改toolbar

以及流程图、图片、js表达式的处理，都会辅助一些其他的依赖，如katex、dom-to-image、mermaid，具体使用方式看readme示例

常用属性

previewOptions
简单示例：
重置预览内容的方法

const renderers = {
 code: ({ _, language, value }) => {
   value.replace(/\n/g, "<br/>")
   return value;
 }
};

内容替换渲染

<MDEditor.Markdown
     source={text}
     previewOptions={{ renderers }}
/>

其他属性

value: string: The Markdown value. //markdown文本

onChange?: (value: string): Event handler for the onChange event.//onChange事件

commands?: ICommand[]: An array of ICommand, which, each one, contain a commands property. If no commands are specified, the default will be used. Commands are explained in more details below.

autoFocus?: true: Can be used to make Markdown Editor focus itself on initialization.//自动焦距

previewOptions?: ReactMarkdown.ReactMarkdownProps: This is reset @uiw/react-markdown-preview settings. 

textareaProps?: TextareaHTMLAttributes: Set the textarea related props.

height?: number=200: The height of the editor.

visiableDragbar?: boolean=true: Show drag and drop tool. Set the height of the editor.

highlightEnable?: boolean=true: Disable editing area code highlighting. The value is false, which increases the editing speed.

fullscreen?: boolean=false: Show markdown preview.

preview?: 'live' | 'edit' | 'preview': Default value live, Show markdown preview. //预览模式

maxHeight?: number=1200: Maximum drag height. The visiableDragbar=true value is valid.//最高宽

minHeights?: number=100: Minimum drag height. The visiableDragbar=true value is valid.//最小宽

tabSize?: number=2: The number of characters to insert when pressing tab key. Default 2 spaces.

hideToolbar?: boolean=false: Option to hide the tool bar.