更新记录

1.0.0（2026-05-27） 下载此版本

• 首次发布
• 支持 Haosns 长文 Markdown 方言解析（标题、加粗、斜体、对齐、列表、引用、插图占位等）
• 提供 articleMarkdownToHtml、articleContentToListPlainText 等 API
• 支持草稿 inline-map 元数据与详情页 gallery 拆分

平台兼容性

uni-app(3.7.8)

haosns-markdown

长文 Markdown 解析 SDK（纯 JavaScript，无 UI 依赖）。与 haosns-article-editor 配套，也可单独用于详情页渲染、列表摘要等场景。

平台：uni-app · Vue2 / Vue3 · App · H5 · 小程序

安装

插件市场

1. 打开 DCloud 插件市场，搜索 Haosns 长文 Markdown 解析器
2. 点击 使用 HBuilderX 导入插件，选择目标 uni-app 项目
3. 导入完成后，项目根目录应存在 uni_modules/haosns-markdown

本地 zip

1. 解压 zip，将 haosns-markdown 目录放入项目 uni_modules/ 下
2. 重新打开项目或重新运行

目录结构：

项目根目录/
└── uni_modules/
    └── haosns-markdown/
        ├── js_sdk/
        │   └── article-markdown.js
        ├── package.json
        └── readme.md

快速开始

import {
  articleMarkdownToHtml,
  articleContentToListPlainText
} from '@/uni_modules/haosns-markdown/js_sdk/article-markdown.js'

// 详情页 HTML
const html = articleMarkdownToHtml(content, { '1': 'https://example.com/a.jpg' })

// 列表纯文本摘要
const plain = articleContentToListPlainText(content)

详情页配合 mp-html 渲染：<mp-html :content="html" />

内容格式

本 SDK 解析的是 Haosns 长文方言，与标准 Markdown 存在差异：

建议使用 haosns-article-editor 编辑，以保证存储格式一致。

API 参考

articleMarkdownToHtml(raw, inlineImageMap?)

将 Markdown 正文转为 HTML，供预览或详情页使用。

• raw：正文字符串
• inlineImageMap：{ "1": "https://...", "2": "..." }，key 对应 [图片:n] 中的 n

articleContentToListPlainText(raw)

生成列表展示用纯文本，去除 Markdown 标记与插图占位符。

buildFormatInsertSnippet(item, selectedText?)

根据格式项生成待插入文本片段（供编辑器调用）。

buildArticleImageInsertSnippet(content, start, end, imageId)

生成插图占位 [图片:id] 插入片段。

spliceArticleContent(text, start, end, insertText)

在指定选区插入内容，返回 { text, selectionStart, selectionEnd }。

embedArticleDraftInlineMap(content, map) / extractArticleDraftInlineMap(raw)

草稿场景：将插图 URL 映射写入 content 尾部元数据，或从中读出。

// 保存
const saved = embedArticleDraftInlineMap(content, inlineImageMap)

// 读取
const { content, map } = extractArticleDraftInlineMap(saved)

元数据格式为 HTML 注释 <!--article-inline-map:...-->，展示时会被自动剥离。

applyArticleDetailGallerySplit(dataItem)

详情数据拆分：顶栏轮播图与正文插图分离。

applyArticleDetailGallerySplit(detail)
// detail.image              → 顶栏 gallery URL 数组
// detail.articleInlineImages → 正文 [图片:n] 对应 URL 数组

其他常用导出

完整导出见 js_sdk/article-markdown.js。

与 haosns-article-editor 的关系

使用编辑器组件时，须先安装本 SDK。

常见问题

预览或详情页 HTML 为空？
检查 inlineImageMap 的 key 是否与 [图片:n] 中的 n 一致；确认 content 非空。

加粗不生效？
本方言使用 【文字】，不是 **文字**。

对齐样式在详情页无效？
HTML 中会输出 article-align-center 等 class，详情页样式中需自行定义：

.article-align-center { text-align: center; }
.article-align-right { text-align: right; }

如何联系作者？
请通过 DCloud 插件市场 uni-im 咨询，勿在 readme、changelog、插件简介中填写 QQ、微信等联系方式。

更新日志

见 changelog.md