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.