# Markdown 编辑器

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/markdown/freepass)
- 平台：移动端
- 维护者：赵俊飞
- 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}
      isMobile
    />
  );
}

export default memo(Basic);
```

## Tips

该组件基于开源的Vditor进行封装， vditor的更多配置及参考文档：[https://ld246.com/article/1549638745630](https://ld246.com/article/1549638745630)
移动和pc是同一个组件，通过isMobile判断是否是移动端， 移动端与pc的差异如下：

- 移动端相比pc端，移除了一些不常用的工具栏
- 移动端工具栏滚动时具有吸附效果

## 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 | 否 |  |
