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

2.2 KiB
Raw Permalink Blame History

title description type group menuName icon order
Markdown 渲染 0 ⚙ 组件 Markdown 渲染 58

1.1.6 版本开始

基本用法

{
    "type": "page",
    "body": {
        "type": "markdown",
        "value": "# title\n markdown **text**"
    }
}

动态数据

动态数据可以通过 name 来关联,类似 static 组件

基于 Editor 和数据联动来实现预览功能

{
    "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 文件,比如

{
    "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-typetext/markdowntext/x-markdown 的纯文本。

视频

可以使用 ![text](video.mp4) 语法来嵌入视频。

高级配置

1.8.1 及以上版本

有以下配置:

  • html是否支持 html 标签,默认 false
  • linkify是否自动识别链接默认值是 true
  • breaks是否回车就是换行默认 false
{
    "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 外部地址