如何让draft-js导出的空<p></p>标签在HTML渲染时正常显示空行

问题现象 #

在React项目中使用draft-js作为富文本编辑器，通过draft-convert将内容转换为HTML存储时，编辑器内的空行会被导出为空<p></p>标签，浏览器默认会折叠空块级元素的高度，因此使用html-react-parser等工具解析渲染时，空p标签无法呈现出预期的空行效果。
例如编辑器内输入内容为：

Hello

World

导出的HTML为<p>Hello</p><p></p><p>World</p>，渲染后中间空行丢失。

可落地方案 #

方案1：转换环节给空p标签填充<br>占位（推荐，多端兼容性最好） #

空p标签无法渲染高度的核心原因是标签内无任何流式内容，给空p嵌入一个<br>标签即可让浏览器正常渲染行高，可在两个环节做处理：

• 导出环节配置draft-convert规则，从源头生成规范HTML

import { convertToHTML } from 'draft-convert';

// 转换编辑器内容为HTML时配置块级元素规则
const exportHtml = convertToHTML({
  blockToHTML: (block) => {
    // 匹配空的普通文本段落
    if (block.type === 'unstyled' && block.text.trim() === '') {
      return <p><br /></p>;
    }
  }
})(editorState.getCurrentContent());

• 渲染环节预处理存储的HTML字符串
  如果已经存储了一批历史空p标签数据，可以在解析展示前批量替换：

const processRichTextHtml = (rawHtml) => {
  // 匹配所有包含0或多个空白字符的空p标签，替换为带br的结构
  return rawHtml.replace(/<p>\s*<\/p>/g, '<p><br></p>');
};

// 使用示例
const renderContent = parse(processRichTextHtml(storedHtml)); // parse为html-react-parser提供的解析方法

方案2：CSS强制空p标签占据行高（仅Web端展示时最简便） #

给富文本展示容器添加专属样式，无需修改HTML结构即可实现空行效果：

/* 给富文本展示容器加类名，避免影响全局p标签样式 */
.rich-content p:empty {
  /* 最小高度与正文行高保持一致，空行高度匹配正常行 */
  min-height: 1.5em;
  /* 按项目实际p标签的边距规则调整，保证段落间距一致 */
  margin: 0 0 1em 0;
}

注意：如果空p标签内存在不可见的空格、换行符，:empty伪类会失效，可搭配方案1的正则先清理p标签内的冗余空白字符。

方案3：自定义html-react-parser的渲染逻辑 #

如果不想修改原始HTML字符串，可在解析阶段判断空p节点，自定义渲染输出：

import parse from 'html-react-parser';

const renderContent = parse(storedHtml, {
  replace: (domNode) => {
    // 匹配无任何子节点的空p标签
    if (domNode.name === 'p' && domNode.children?.length === 0) {
      return <p><br /></p>;
    }
  }
});

选型参考 #

• 若富文本内容需要多端（Web、小程序、APP）消费，优先选择方案1，导出时就生成带br的标准HTML，无需各端单独写兼容逻辑
• 若富文本仅在当前Web项目展示，选方案2改造成本最低
• 若需要对富文本节点做更多自定义渲染拦截，选方案3灵活性最高

内容的提问来源于stack exchange，提问作者Viraj