react-monaco-markdown

安装

npm

npm i react-monaco-markdown

pnpm

pnpm i react-monaco-markdown

yarn

yarn add react-monaco-markdown

使用

import ReactMonacoMarkdown from 'react-monaco-markdown';

<ReactMonacoMarkdown
  value={'**Hello react-monaco-markdown!!!**'}
  onChange={(pre) => changeData(pre.text)}
/>;

Options

| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 版本 | | ---------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | | className | 类 | string | - | false | >= 1.0.6 | | style | style 样式 | React.CSSProperties | - | false | >= 1.0.6 | | value | 属性值 | string | - | false | | | onChange | 修改数据方法 | (pre: ReturnValue) => void | - | false | | | renderHtml | 渲染 html 方法 | (pre: ReturnValue) => React.ReactNode | - | false | | | config | 额外配置 | EditorConfig | - | false | >= 1.0.6 | | width | 宽度 | number/string | 100% | false | >= 1.0.7 | | height | 高度 | number/string | 100% | false | >= 1.0.7 | | options | monaco-editor 的 options 配置 | editor.IStandaloneEditorConstructionOptions | - | false | >= 1.0.7 |

EditorConfig

| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 版本 | | ------------------- | -------------- | ------------------------------------------------------- | ------- | -------- | -------- | | theme | 主题 | 'light' / 'dark' | 'light' | false | >= 1.0.7 | | isReadOnly | 是否只读 | Boolean | false | false | >= 1.0.7 | | view | 切换展示视图 | View | - | false | >= 1.0.7 | | htmlClass | 展示区域 class | string | - | false | >= 1.0.7 | | markdownClass | 编写区域 class | string | - | false | >= 1.0.7 | | table | 表格配置 | Table | - | false | >= 1.0.7 | | imageUrl | 预设 图片 URL | string | - | false | >= 1.0.7 | | imageAccept | 图片 accept | string | - | false | >= 1.0.7 | | linkUrl | 预设 link Url | string | - | false | >= 1.0.7 | | onCustomImageUpload | 自定义图片上传 | (event: any) => Promise<{ url: string; text?: string }> | - | false | >= 1.0.7 | | onImageUpload | 本地图片上传 | UploadFunc | - | false | >= 1.0.7 |

Table

export interface Table {
  maxRow: number;
  maxCol: number;
}

View

export interface View {
  menu?: boolean;
  both?: boolean;
  md?: boolean;
  html?: boolean;
}

UploadFunc

export type UploadFunc =
  | ((file: File) => Promise<string>)
  | ((file: File, callback: (url: string) => void) => void);

在 Next.js 中使用

import dynamic from 'next/dynamic'
const ReactMonacoMarkdown = dynamic(() => import('react-monaco-markdown'), {ssr: false})

const NextMarkdownPreview = dynamic(() => import('react-monaco-markdown').then(res => res.NextMarkdownPreview), {ssr: false})

<ReactMonacoMarkdown
  value={'**Hello react-monaco-markdown!!!**'} />
  onChange={pre => changeData(pre.text)}
  renderHtml={pre => <NextMarkdownPreview code={pre.text} />}
/>

LICENSE

MIT