开发者工具 · HTML WYSIWYG 编辑器

所见即所得简史：从 Xerox PARC 的 Bravo 到浏览器编辑器

2026年7月6日 · 背景

html 内容可编辑开发人员工作流程

追踪所见即所得的编辑过程，从 1970 年代的研究系统到桌面出版和网页构建器，再到每个浏览器中的内容可编辑编辑器。

在 WYSIWYG 之前，您进行了盲目格式化 — 使用标记和打印工作流程打开，以及为什么可视化编辑是革命性的

在可视化编辑之前，作者经常编写控制代码或标记，然后查看格式化结果。延迟使得布局迭代：更改指令、再次渲染、比较和重复。在撰写过程中显示格式缩短了该循环并改变了非专家对文档软件的期望。

本文故意避免存储库未独立来源的确切第一个和日期。其目的是解释浏览器编辑界面背后的设计血统，而不是证明完整的历史年表。命名的里程碑在作为实际产品历史发布之前需要存档参考。

与 Xerox PARC 相关的研究系统在 WYSIWYG 历史中被广泛讨论，并且该工作簿名为 Bravo。这里提供的存储库源没有验证其日期、功能集或相对于同时代存储库的优先级，因此这些细节被省略，而不是解释为事实。

合理的概念里程碑是位图显示与格式化文档的直接操作相结合。屏幕成为输出的主动近似，而不仅仅是输入命令的地方。可见格式和底层结构之间的关系仍然定义了现代编辑器的权衡。

该工作簿接下来命名为 Xerox Star、MacWrite 和桌面出版。精确的排序和影响需要超出此代码库的来源。可以说，无需发明的是，图形个人计算使视觉构图为更广泛的受众所熟悉，并将编辑与字体、间距和页面布局联系起来。

该桌面模型鼓励人们对稳定页面和受控输出设备的期望。后来 Web 内容使这一承诺变得复杂，因为一个 HTML 片段可以满足许多样式表、宽度和用户偏好。随着出版从纸质页面转向响应式文档，“所见即所得”一词变得不再那么直白。

可视化网页构建器将直接组合引入 HTML，并与生成的包装器和表示标记相关联。同样，该工作簿命名了特定产品，但没有详细声誉或时间表的存储库证据。本文将重点放在持久的工程权衡上。

可视化工具必须将手势转换为树和字符串。如果它针对即时外观进行优化，则可能会发出无法稍后重新设计的本地呈现。如果它限制输出，源的视觉保真度就会降低。 ToolAcre 选择受约束的语义子集并显示过滤后的源。

浏览器 contenteditable 将编辑主机移至普通页面元素中。浏览器可以管理插入符、选择、键入和删除，而应用程序代码提供控件并读取innerHTML。 ToolAcre 遵循该模型，目前通过已弃用的 execCommand 发送工具栏操作。

然后，应用程序添加本机编辑主机不提供的边界：粘贴拦截、源清理、删除报告、字符和字数统计、纯文本提取、复制、下载和惰性预览。这种分层解释了为什么 contenteditable 本身并不是一个完整的产品。

轻量级标记和结构化编辑器以不同的方式回答相同的输出质量问题。它们限制作者可以表达或存储的内容，然后呈现受控结果。该工作簿要求历史上的反向运动，但这里没有任何来源支持日期、收养主张或命名的因果顺序。

有用的比较是架构上的。受约束的源可以轻松区分和转换，而可视化表面则降低了格式化的障碍。 ToolAcre 将可视化绘图与可见 HTML 相结合，但它不提供协作、文档模型或确定性跨浏览器命令。

本文不提供逐个产品的时间表、发明来源、引用研究人员的话或涵盖超出广泛影响力的桌面出版。这些遗漏是故意的，因为没有提供档案来源。编辑器实现可以验证当前行为，而不是历史优先级。

它也没有声称可视化编辑器一定会产生错误的标记。输出质量取决于编辑模型和策略。在这里，别名和白名单减少了浏览器突变后的变化，而源模式让作者可以查看剩下的内容。其他编辑可能会选择不同的结构。

旧的紧张局势依然存在：直接的视觉控制有助于作者，而持久的结构化输出有助于系统和未来的维护人员。可靠的编辑器使翻译可见，并承认渲染取决于浏览器和目标上下文。

ToolAcre 是当代的一个小例子。设置一次性笔记的格式，检查过滤后的 HTML，并将预览与源进行比较。该练习展示了血统，而没有将无源历史大纲变成错误的精确性，也没有声称这种实现解决了每一个所见即所得的妥协。