BizMarkdownEditor Markdown 编辑器

Markdown 编辑器：工具栏（标题 / 加粗 / 斜体 / 删除线 / 列表 / 引用 / 代码块 / 链接 / 表格）+ 分屏 / 纯编辑 / 纯预览三模式，自研轻量渲染（标题、粗斜删除线、行内码、围栏代码块、有序无序列表、引用、分隔线、链接图片、表格），零第三方依赖。文档中心、工单回复、公告说明等 Markdown 语境——与 BizRichEditor（富文本所见即所得）互补，按团队编辑范式取舍。

基础用法

## 问题描述 登录页验证码 **连续刷新后不更新**。 排查步骤： 1. 清缓存复现 2. 抓包看 `/captcha` 响应 3. 对比会话 Cookie > 建议优先检查 Redis 会话过期策略。

问题描述

登录页验证码 连续刷新后不更新。

排查步骤：

1. 清缓存复现
2. 抓包看 /captcha 响应
3. 对比会话 Cookie

建议优先检查 Redis 会话过期策略。

分屏编辑 + 实时预览，v-model 同步 Markdown 文本。

<script setup lang="ts">
/** 场景：工单回复——分屏编辑实时预览 */
import { ref } from 'vue'
import { BizMarkdownEditor } from 'vue3-ep-biz-lib'

const content = ref('## 问题描述\n\n登录页验证码 **连续刷新后不更新**。\n\n排查步骤：\n\n1. 清缓存复现\n2. 抓包看 `/captcha` 响应\n3. 对比会话 Cookie\n\n> 建议优先检查 Redis 会话过期策略。\n')
</script>

<template>
  <BizMarkdownEditor v-model="content" :height="260" />
</template>

显示代码

工具栏

选中本行后点工具栏 B 试试加粗 - 列表项 - 另一项 `行内代码` 与 ~~删除线~~ 也可选区后点击工具

选中本行后点工具栏 B 试试加粗

• 列表项
• 另一项

行内代码 与 删除线 也可选区后点击工具

选区包裹 / 行首插入两类工具（加粗、列表、表格等）。

<script setup lang="ts">
/** 场景：工具栏操作——选区包裹与行首插入 */
import { ref } from 'vue'
import { BizMarkdownEditor } from 'vue3-ep-biz-lib'

const content = ref('选中本行后点工具栏 B 试试加粗\n\n- 列表项\n- 另一项\n\n`行内代码` 与 ~~删除线~~ 也可选区后点击工具\n')
</script>

<template>
  <BizMarkdownEditor v-model="content" :height="240" />
</template>

显示代码

预览模式

模式

编辑分屏预览

# 接口变更公告 自 v2.6 起 `/api/order` 新增 `channel` 字段： | 字段 | 类型 | 说明 | | --- | --- | --- | | channel | string | 渠道标识 | 详见 [变更日志](https://example.com)。 --- 如遇问题请联系平台组。

接口变更公告

自 v2.6 起 /api/order 新增 channel 字段：

字段	类型	说明
channel	string	渠道标识

详见 变更日志。

---

如遇问题请联系平台组。

preview 切换 编辑 / 分屏 / 预览（文档详情只读场景）。

<script setup lang="ts">
/** 场景：预览模式——编辑 / 分屏 / 预览切换（文档详情只读） */
import { ref } from 'vue'
import { ElRadioGroup, ElRadioButton } from 'element-plus'
import { BizMarkdownEditor } from 'vue3-ep-biz-lib'
import type { BizMarkdownPreviewMode } from 'vue3-ep-biz-lib'

const mode = ref<BizMarkdownPreviewMode>('split')

const content = ref('# 接口变更公告\n\n自 v2.6 起 `/api/order` 新增 `channel` 字段：\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| channel | string | 渠道标识 |\n\n详见 [变更日志](https://example.com)。\n\n---\n\n如遇问题请联系平台组。\n')
</script>

<template>
  <div>
    <div style="margin-bottom: 10px; display: flex; align-items: center; gap: 12px">
      <span style="font-size: 13px">模式</span>
      <ElRadioGroup v-model="mode" size="small">
        <ElRadioButton value="edit">编辑</ElRadioButton>
        <ElRadioButton value="split">分屏</ElRadioButton>
        <ElRadioButton value="preview">预览</ElRadioButton>
      </ElRadioGroup>
    </div>
    <BizMarkdownEditor v-model="content" :preview="mode" :height="240" />
  </div>
</template>

显示代码

预置内容

# 国庆值班安排 | 日期 | 值班人 | 电话 | | --- | --- | --- | | 10-01 | 张三 | 138****0001 | | 10-02 | 李四 | 139****0002 | > 值班期间请保持电话畅通。

国庆值班安排

日期	值班人	电话
10-01	张三	138**0001
10-02	李四	139**0002

值班期间请保持电话畅通。

回显已有 Markdown（公告 / 工单详情编辑）。

<script setup lang="ts">
/** 场景：预置内容回显——公告编辑 */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizMarkdownEditor } from 'vue3-ep-biz-lib'

const presets: Record<string, string> = {
  announcement: '# 国庆值班安排\n\n| 日期 | 值班人 | 电话 |\n| --- | --- | --- |\n| 10-01 | 张三 | 138****0001 |\n| 10-02 | 李四 | 139****0002 |\n\n> 值班期间请保持电话畅通。\n',
  guide: '## 新人上手指南\n\n1. 领取账号\n2. 配置邮箱\n3. 加入项目组\n\n详细文档见内网 **知识库**。\n',
}

const content = ref(presets.announcement ?? '')
</script>

<template>
  <div>
    <div style="margin-bottom: 10px; display: flex; gap: 8px">
      <ElButton size="small" @click="content = presets.announcement ?? ''">载入：值班公告</ElButton>
      <ElButton size="small" @click="content = presets.guide ?? ''">载入：上手指南</ElButton>
    </div>
    <BizMarkdownEditor v-model="content" :height="240" />
  </div>
</template>

显示代码

高度与禁用

禁用

## 只读态 关闭开关后编辑区禁用，预览不受影响。

只读态

关闭开关后编辑区禁用，预览不受影响。

height 调节编辑区高度，disabled 只读态。

<script setup lang="ts">
/** 场景：高度与禁用——高编辑区 / 只读态 */
import { ref } from 'vue'
import { ElSwitch } from 'element-plus'
import { BizMarkdownEditor } from 'vue3-ep-biz-lib'

const disabled = ref(false)
const content = ref('## 只读态\n\n关闭开关后编辑区禁用，预览不受影响。\n')
</script>

<template>
  <div>
    <div style="margin-bottom: 10px; display: flex; align-items: center; gap: 8px">
      <span style="font-size: 13px">禁用</span>
      <ElSwitch v-model="disabled" />
    </div>
    <BizMarkdownEditor v-model="content" :height="360" :disabled="disabled" />
  </div>
</template>

显示代码

变化事件

字符 10行数 1change 次数 0

输入内容观察字数统计

输入内容观察字数统计

change / update:modelValue 联动，字数统计。

<script setup lang="ts">
/** 场景：变化事件——字数统计与内容日志 */
import { computed, ref } from 'vue'
import { ElTag } from 'element-plus'
import { BizMarkdownEditor } from 'vue3-ep-biz-lib'

const content = ref('输入内容观察字数统计')
const changes = ref(0)

const chars = computed(() => content.value.length)
const lines = computed(() => content.value.split('\n').length)
</script>

<template>
  <div>
    <div style="margin-bottom: 10px; display: flex; gap: 8px">
      <ElTag size="small">字符 {{ chars }}</ElTag>
      <ElTag size="small" type="info">行数 {{ lines }}</ElTag>
      <ElTag size="small" type="warning">change 次数 {{ changes }}</ElTag>
    </div>
    <BizMarkdownEditor v-model="content" :height="220" @change="() => (changes += 1)" />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	string	''	Markdown 文本
preview	'split' | 'edit' | 'preview'	'split'	预览模式
height	number	320	编辑区高度（px）
toolbar	boolean	true	工具栏
placeholder	string	'输入 Markdown 内容…'	占位
disabled	boolean	false	禁用

Events

事件名	参数	说明
change	(value: string)	内容变化（update 同步）

Expose

名称	类型	说明
focus	() => void	聚焦编辑区
getMode	() => BizMarkdownPreviewMode	当前预览模式

TIP

渲染为常用 Markdown 子集（标题 / 粗斜删除 / 行内码 / 代码块 / 列表 / 引用 / 分隔线 / 链接图片 / 表格）；渲染结果做了 HTML 转义，内容不做脚本执行。语法增强（如 Mermaid、任务列表）可按需扩展。