如何在React WYSIWYG编辑器中设置行间距并保存多换行？

调整回车键默认行间距 #

绝大多数富文本编辑器按下回车键默认生成<p>标签，浏览器默认给<p>设置了上下margin，是行间距过大的核心原因。

• 方案1：重置编辑器内容区的默认标签样式

/* .EditorContent替换为你的编辑器内容容器的class */
.EditorContent p {
  margin: 0 0 8px 0; /* 按需调整上下边距数值 */
}

• 方案2：修改回车默认插入的块类型
  如果使用Draft.js、Slate等可自定义内核的编辑器，可修改回车事件逻辑，将默认插入的<p>标签替换为无默认边距的<div>标签，从根源避免默认样式影响。

修复shift+enter插入<br>导致的对齐异常 #

• 方案1：重写shift+enter快捷键逻辑
  拦截shift+enter快捷键，不插入<br>标签，改为插入自定义行块（可单独设置该类行块的上下边距，实现比普通回车更小的行间距）。以Draft.js为例的拦截逻辑参考：

const handleKeyCommand = (command, editorState) => {
  // 匹配shift+enter触发的split-block命令
  if (command === 'split-block') {
    // 执行自定义插入逻辑，比如插入行间距更小的div块
    const newEditorState = customSplitLine(editorState);
    if (newEditorState) return 'handled';
  }
  return 'not-handled';
};

• 方案2：保留<br>时修复对齐样式
  如果业务需要保留<br>的特性，给内容区的<br>标签统一设置对齐样式即可：

.EditorContent br {
  line-height: inherit; /* 继承父级行高 */
  display: inline-block;
  width: 100%;
  margin: 0;
}

解决多次回车无法保存多个换行的问题 #

该问题由浏览器默认折叠连续空白节点、编辑器默认过滤空<br>标签导致：

• 方案1：添加css属性禁止空白折叠

.EditorContent {
  white-space: pre-wrap;
}

• 方案2：优化空行插入逻辑
  修改换行插入逻辑，每次插入空行时生成<p>&#8203;</p>（带零宽空格的块标签），而非连续<br>，避免空节点被自动过滤。

新增行间距自定义选项 #

• 第一步：预定义不同行高的样式类，或支持行内样式动态设置

.lh-12 { line-height: 1.2; }
.lh-15 { line-height: 1.5; }
.lh-20 { line-height: 2.0; }

• 第二步：在编辑器工具栏添加行间距选择器/数值输入框，用户选择对应数值后，给选中的内容块/全局内容容器挂载对应的样式类，或直接设置style.lineHeight属性即可。

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