# Markdown 编辑器

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/markdown/freepass)
- 平台：PC
- 维护者：赵俊飞
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Markdown]

## 代码演示

### 基础用法

```jsx
import { memo } from "react";
import { Markdown, Vditor } from "@weapp/ui";

function Basic(props: { weId?: string }) {
  function onReady(vditor: Vditor) {
    console.log("onReady", vditor);
  }

  function onChange(mdText: string, vditor: Vditor) {
    console.log("onChange", mdText, vditor);
  }

  function onBlur(mdText: string, vditor: Vditor) {
    console.log("onBlur", mdText, vditor);
  }

  function onFocus(mdText: string, vditor: Vditor) {
    console.log("onFocus", mdText, vditor);
  }

  function onSelect(mdText: string, vditor: Vditor) {
    console.log("onSelect", mdText, vditor);
  }

  return (
    <Markdown
     
      onReady={onReady}
      onChange={onChange}
      onBlur={onBlur}
      onFocus={onFocus}
      onSelect={onSelect}
      height={300}
    />
  );
}

export default memo(Basic);
```

### 只读模式

```jsx
import { memo } from "react";
import { Markdown } from "@weapp/ui";

const value = `
### 大标题 - Heading 3

你可以选择使用 H1 至 H6，使用 ##(N) 打头。建议帖子或回帖中的顶级标题使用 Heading 3，不要使用 1 或 2，因为 1 是系统站点级，2 是帖子标题级。

> NOTE: 别忘了 # 后面需要有空格！

#### Heading 4

##### Heading 5

###### Heading 6

`;

function Basic(props: { weId?: string }) {
  return (
    <Markdown
     
      height={600}
      value={value}
      readOnly={true}
    />
  );
}

export default memo(Basic);
```

### 定制化工具栏

```jsx
import { memo } from 'react';
import { Markdown } from '@weapp/ui';

// 默认工具栏配置
const toolbar = [
  "emoji",
  "headings",
  "bold",
  "italic",
  "strike",
  "link",
  "|",
  "list",
  "ordered-list",
  "check",
  "outdent",
  "indent",
  "|",
  "quote",
  "line",
  "code",
  "inline-code",
  "insert-before",
  "insert-after",
  "|",
  "image",
  "table",
  "|",
  "undo",
  "redo",
  "|",
  "fullscreen",
];
const uploadParams = { module: 'document' }; // 上传鉴权参数，仅供参考
const uploadPreviewParams = { // 预览鉴权参数，仅供参考
  module: 'document',
  authModule: 'xxx',
  commonParam: { testKey: 'testValue' },
};

function Basic(props: { weId?: string }) {
  return <div>
    <Markdown
     
      toolbar={toolbar}
      uploadParams={uploadParams}
      uploadPreviewParams={uploadPreviewParams}
    />
  </div>
}

export default memo(Basic);
```

## Tips

该组件基于开源的Vditor进行封装， vditor的更多配置及参考文档：[https://ld246.com/article/1549638745630](https://ld246.com/article/1549638745630)

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| width | 宽度 | string | number | 否 |
| height | 高度 | string | number | 否 |
| minHeight | 最小高度 | string | number | 200 |
| value | 显示的内容 | string | 否 |  |
| placeHolder | 输入提示 | string | 否 | 请输入 |
| loginFree | 是否免登 | boolean | 否 | false |
| readonly | 只读模式 | boolean | 否 | false |
| disabled | 是否禁用 | boolean | 否 | false |
| toolbar | 工具栏配置 | ToolbarType | 否 |  |
| vditorConfig | 接收vditor的原始API | IOptions | 否 |  |
| onReady | vditor初始化完成的回调 | ( vditor: Vditor) => void | 否 |  |
| onChange | 数据发生变化的回调 | (mdText: string, vditor: Vditor) => void | 否 |  |
| onFocus | 聚焦事件 | (mdText: string, vditor: Vditor) => void | 否 |  |
| onBlur | 失焦事件 | (mdText: string, vditor: Vditor) => void | 否 |  |
| onSelect | 选中编辑器内文字触发的回调 | (mdText: string, vditor: Vditor) => void | 否 |  |
| uploadParams | 上传类组件公共上传传参（按照Upload的uploadParams传参即可） | AnyObj | 否 |  |
| uploadPreviewParams | 上传类组件公共预览参数（用来拼接在url地址后进行业务鉴权） | AnyObj | 否 |  |
