根本原因是预览环境缺少对标签的语义化理解和基础样式约束；需确保预览容器为标准块级上下文、用最小CSS统一重置段落样式、清洗非法HTML结构，并区分语义段落与视觉换行。

富文本编辑器输出的 HTML 在预览时段落格式混乱，根本原因往往不是编辑器本身，而是预览环境缺少对

标签的语义化理解和基础样式约束。规范段落格式的关键，是让预览区域像真实网页一样“读懂”

，并用简洁、稳定的 CSS 主动接管默认行为。

确保预览容器启用标准文档流

很多富文本预览直接把 HTML 片段插入 innerHTML 到一个 div 或 section 中，但若该容器被设为 display: flex、display: grid 或 display: inline-block，

就可能退化为非块级行为，导致 text-indent 失效、上下间距塌陷。必须保证预览容器本身是标准块级上下文：

• 给预览容器（如 .preview）显式设置 display: block 或不设 display（默认即 block）
• 避免父级使用 flex/grid 布局直接包裹

  ，如需布局控制，用 div 或 section 包一层再设布局

• 检查浏览器开发者工具中

  的 computed display 是否为 block —— 不是则说明被意外覆盖

用最小必要 CSS 统一重置段落表现

浏览器默认 margin 不一致（Chrome 约 1em，Firefox 略不同），且无首行缩进。预览时应主动定义一套轻量、可预测的规则，而非依赖编辑器内联 style：

• 统一段距：p { margin: 1.2em 0; }（上/下留白，左右为 0）
• 中文首行缩进：p { text-indent: 2em; }（em 单位适配字号变化，比 px 更健壮）
• 行高优化：p { line-height: 1.6; }（提升段内可读性，不干扰段距）
• 对齐方式按内容定：p { text-align: justify; } 或 text-align: left;，避免用 align="center" 这类已废弃属性

拦截并修正编辑器注入的非法结构

富文本编辑器常在粘贴或回车时生成嵌套

、

内含

、空

或连续
，这些都会破坏语义和渲染。预览前建议做轻量清洗：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 自动移除空段落：
  或仅含空白符的

  应过滤掉

• 修复嵌套：
  xxx
  浏览器会自动断开成
  xxx
  ，预览前可正则替换为
  xxx
  并外层包
• 将孤立
  替换为

  ：连续多个
  通常表示用户想分段，应合并为合理

  结构

区分语义段落与视觉换行

富文本中常误用

包裹短标语、作者名、版权信息等非自然语言段落。这类内容在预览中应降级处理：

• 作者、日期、来源等用 或
  ，不套

• 表单提示、标签说明优先用 + aria-describedby，而非独立段落
• 纯装饰性换行（如标题后空行）用
，而非

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！