开发者工具 · HTML WYSIWYG 编辑器
为什么 HTML 中的“所见”并不完全是“所得到”
· 背景
html CSS 内容可编辑
解释了 WYSIWYG 只能近似网络上最终结果的结构原因，因为 HTML 描述结构，而 CSS、设备和客户端决定外观，以及由此产生的 WYSIWYM 想法。
在编辑器中完美，在页面上错误 - 打开时出现熟悉的不匹配
通知在 ToolAcre 内看起来可能很平衡，但在进入网站后却显得拥挤，因为相同的元素满足不同的样式表。本地 iframe 是一个具有自己的字体、行高、填充和浅色方案的文档。这是一个检查视图，而不是每个目的地的屏幕截图。
WYSIWYG 在网络上具有有限的含义。编辑器可以准确地显示其当前的渲染上下文，但稍后“您得到的”包括宿主 CSS、容器宽度、浏览器设置和绘图期间不存在的内容转换。
HTML 描述结构，而不是外观 — 解释了相同的标记在不同的样式表下呈现不同的效果
HTML 主要记录结构和关系：标题、段落、列表、引文、强调、代码和链接。当用户代理默认值和作者风格解释这些元素时，外观就会出现。 ToolAcre 删除了内联样式和类属性，从而加强了其复制片段中的分离。
相同的 h2 在默认页面中可以很大，在申请卡中可以很紧凑，并且在打印中可以重新设计。即使尺寸发生变化，它的作用仍然是一个标题。作者在决定预览是否具有所需的排版之前应判断结构是否正确。
用户代理样式表和级联 - 涵盖默认浏览器样式以及站点 CSS 如何覆盖编辑器预览显示的内容
浏览器从元素的用户代理规则开始，然后通过级联应用页面样式和用户首选项。 ToolAcre 的预览文档添加了自己的小样式表。它不会导入主机站点的设计令牌或未来的 CMS 主题。
当复制的标记进入另一个页面时，其页边距、列表缩进、链接颜色和标题比例都会发生变化。解决方案不是将临时预览样式烘焙到片段中，因为该编辑器无论如何都会删除它们。在目的地应用经过审查的演示文稿并在那里进行测试。
设备、暗模式和电子邮件客户端 — 描述片段将遇到的许多渲染上下文
设备会改变可用宽度、字体规格和用户缩放。深色模式主题可以改变颜色，而 ToolAcre 有意将其预览固定到浅色文档。电子邮件客户端施加了另一组 HTML 和 CSS 约束，此页面既不模拟也不验证这些约束。
没有存储库源提供浏览器或邮件客户端兼容性矩阵，因此本文定性地命名维度，而不是承诺通用行为。响应式和电子邮件声明需要在实际支持环境中进行测试。一个沙盒 iframe 无法代替这一证据。
WYSIWYM：所见即所得 — 介绍由 LyX 等工具普及的结构编辑哲学
结构编辑思维会询问内容的含义，而不是绘图表面是否与端点完全相同。标题级别表示层次结构，列表表示分组，强表示重要性，链接表示目的地。然后 CSS 在上下文中以视觉方式传达这些含义。
工作簿将此称为 WYSIWYM 并命名为 LyX，但此处没有可用的历史来源。这个概念可以在不指定起源或产品行为的情况下进行解释：首先创作语义意图，然后预览和调整内容实际存在的呈现方式。
工作示例：三个上下文中的一个片段 — 在默认样式表、网站主题和电子邮件预览下显示相同的标记
使用 h2、p、strong、ul 和公共链接构建一个片段。打开下载的文档以查看 ToolAcre 的轻型包装器，将复制的片段粘贴到主题测试页中，并将改编后的副本放置在批准的电子邮件预览中。保持措辞相同。
这三个视图可能会有所不同，因为它们的风格和客户端规则不同，但源结构可以保持可比较。如果电子邮件需要表格或内联演示，则需要单独翻译； ToolAcre 删除了表格和样式，而不是假装其浏览器预览已验证收件箱。
这不包括什么 - CSS 调试或配置编辑器以加载站点样式
本文不会调试 CSS 特异性、使用站点样式配置编辑器或验证电子邮件标记。它还没有声称复制的输出对于任意不受信任的发布是安全的。该消毒剂是一个狭窄的编辑器许可名单，具有记录的解析器差异风险。
预览沙箱会停止 ToolAcre 内的脚本、表单和同源访问。复制的 HTML 会离开该沙箱。使用目的地端卫生、适当的 CSP、响应测试和可达性检查。视觉不匹配和安全性是不同的问题，即使两者在发布后变得可见。
要点：编辑含义，验证标记 - 总结方法以及 ToolAcre 的 HTML WYSIWYG 编辑器如何让您专注于实际移交的标记
在追求视觉奇偶校验之前编辑含义并验证标记。 ToolAcre 使语义片段和本地渲染并排可用，这有助于识别不匹配是来自结构还是来自目标呈现。
然后将审阅的片段移至代表性上下文中并在那里测量结果。良好的工作流程会预期差异，记录有意的调整，并避免声称一个编辑器视图可以预测每个浏览器、设备、主题或收件箱。