开发者工具 · HTML WYSIWYG 编辑器

Enter 与 Shift+Enter：编辑者如何在 <p>、<div> 和 <br> 之间进行选择

2026年2月2日 · 工作原理

html 内容可编辑文本编辑

解释浏览器编辑器背后的段落模型：为什么 Enter 可以创建 <p> 或 <div>，为什么 Shift+Enter 插入 <br>，以及它如何决定间距。

为什么间距在 CMS 中是错误的，但在编辑器中却很好 — 以经典的双间隙或无间隙问题打开

当片段进入 CMS 时，在编辑器中看起来舒适的间距可能会发生变化，因为块从目标样式表接收边距。由 br 分隔的两个段落和两行在结构上是不同的，即使一次预览恰好给了它们相似的垂直距离。

ToolAcre 揭示了源代码中的差异。它不带有复制的边距或内联样式，因此段落间距来自预览包装器或稍后的目标 CSS。编写者应该按含义选择结构并验证序列化元素，而不是添加空白击键，直到一个临时视图看起来正确为止。

Paragraph 和 div 是块容器； br 是另一个流中的空换行元素。该编辑器允许 p 和 br，但不允许 div。粘贴的 div 被展开，保留其单词并允许其后代，同时丢弃包装器。清理后的 br 作为 `<br />` 发出。

邮政地址可以是一个带有故意换行符的段落，因为它的行构成一个单元。两个独立的想法最好用两个段落来表示。目标可以一致地设置 p 边距的样式，而用作垂直间隔符的重复 br 元素将外观直接编码到内容中。

ToolAcre 不设置默认的段落分隔符命令或截取 Enter。 contenteditable 浏览器处理该键，输入侦听器随后刷新输出。存储库限制警告引擎行为不同，因此断言 Enter 始终创建 p、始终创建 div 或遵循一个特定于版本的规则将被发明为兼容性指南。

然后，清理步骤会缩小到达的序列化范围。浏览器创建的 div 无法作为 div 继续存在，但其文本可以保留。这可能会使最终源再次不同于实时中间树。因此，当稳定的段落含义很重要时，源模式是建立显式 p 元素的地方。

工具栏没有“软中断”按钮，并且代码没有注册 Shift+Enter。浏览器可以实现该手势，但本文不承诺其输出。源模式可以保留允许的 br，提供一种确定的方式来在检查视觉结果后表达段落内的中断。

键盘行为还取决于模块未测试的选择和编辑状态。使用您工作中涉及的确切浏览器，然后阅读源代码。如果手势产生不需要的块，请显式重写该片段，而不是依赖从另一个编辑器框架复制的快捷方式描述。

对于地址，使用源模式在收件人、街道和地点之间用 br 组成一个 p。为了简短说明，创建两个 p 元素。返回视觉模式，在插入之前对源进行清理，并比较预览，而不假设其边距与最终网站匹配。

然后复制 HTML 并与“下载 HTML”分开检查该片段。复制的结果包含经过清理的正文标记；下载包含包含 ToolAcre 预览版 CSS 的完整文档。这种区别可以解释为什么打开下载的文件看起来比将复制的片段粘贴到具有不同样式的系统中更完整。

可以保留空的允许段落，因为 p 被接受并且没有规则删除空块。已知的不间断空格实体可能会变成其解码字符，并随后根据本地实体实现进行转义；该代码没有提供专门针对间隔段落的清理规则。

因此，“立即清理”并不是布局清理器。它删除了不支持的标记和属性，平衡标签和格式源，但它可以保留结构上允许的空白。在源或视觉模式下故意删除间距伪影，并让目标 CSS 提供正常边距而不是累积空白块。

本文不涉及边距折叠、框架分隔符配置、浏览器键盘矩阵或电子邮件间距怪癖。它也没有声称预览版再现了 CMS。轻型沙盒使用自己的主体字体、行高、填充和中断行为。

也不将过滤后的输出视为普遍安全的出版物。恶意提交需要针对目标进行适当的服务器端清理，即使一次性本地预览仍然处于惰性状态。段落语义、浏览器编辑行为和安全策略是三个独立的问题，不应归结为一个“看起来正确”的测试。

选择与内容匹配的中断，但验证而不是预测按键。 ToolAcre 提供直接源访问，接受 p 和 br，解开 div 并显示沙盒渲染。这些事实支持可重复的工作流程，而无需发明有关 Enter 或 Shift+Enter 的承诺。

构建一个小地址并注释，切换模式两次，并确保预期的结构能够经受住清理。如果目标应用了令人惊讶的间隙，请检查其 CSS，而不是插入更多空 HTML。稳定的意义比调整到一个孤立的预览的间距传播得更好。