amis2/docs/zh-CN/components/markdown.md

117 lines
2.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Markdown 渲染
description:
type: 0
group: ⚙ 组件
menuName: Markdown 渲染
icon:
order: 58
---
> 1.1.6 版本开始
## 基本用法
```schema
{
"type": "page",
"body": {
"type": "markdown",
"value": "# title\n markdown **text**"
}
}
```
## 动态数据
动态数据可以通过 name 来关联,类似 [static](form/static) 组件
## 基于 Editor 和数据联动来实现预览功能
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "group",
"body": [
{
"type": "editor",
"name": "md",
"language": "markdown"
},
{
"type": "markdown",
"name": "md"
}
]
}
]
}
```
## 加载外部 markdown 文件
> 1.6.5 及以上版本
可以通过 `src` 属性来加载外部 markdown 文件,比如
```schema: scope="body"
{
"type": "markdown",
"src": "/api/mock2/sample/mirror?json=%7B%22status%22%3A0%2C%22data%22%3A%22%23%23%20title%20%5Cn%20content%22%7D"
}
```
这个接口的返回格式可以是两种,一种是 JSON类似
```
{
"status": 0,
"msg": "",
"data": "markdown"
}
```
另一种是返回 `content-type``text/markdown``text/x-markdown` 的纯文本。
## 视频
可以使用 `![text](video.mp4)` 语法来嵌入视频。
## 高级配置
> 1.8.1 及以上版本
有以下配置:
- html是否支持 html 标签,默认 false
- linkify是否自动识别链接默认值是 true
- breaks是否回车就是换行默认 false
```schema
{
"type": "page",
"body": {
"type": "markdown",
"value": "# title\n <b>markdown</b>\n http://www.github.com/",
"options": {
linkify: false,
html: true,
breaks: true
}
}
}
```
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| --------- | -------- | ------ | -------- |
| name | `string` | | 名称 |
| value | `string` | | 静态值 |
| className | `string` | | 类名 |
| src | `Api` | | 外部地址 |