WYSIWYG 是什么:所见即所得编辑器如何工作、适合谁用

WYSIWYG 是 "What You See Is What You Get" 的缩写，中文通常叫"所见即所得"。它指你在编辑器里看到的排版效果，和最终发布或输出的结果基本一致——你加粗一段文字，屏幕上就显示为粗体；你插入一张图片，它就出现在光标所在位置，不需要你手写 <b> 或 <img> 标签。WYSIWYG 编辑器适合两类人：一是不懂 HTML 但需要更新网页内容的非技术用户，二是希望把富文本输入能力嵌入自己系统的开发者。如果你需要像素级控制页面结构、或要产出高度定制的代码，直接写 HTML 往往更合适。

WYSIWYG 的核心含义

传统写网页的方式是编辑 HTML 源码，你在文本里写标签，再到浏览器里预览效果，改一次看一次，来回切换。WYSIWYG 把这两步合并：编辑区域本身就是渲染后的样子，你的操作（选中文字、点加粗按钮、拖入图片）直接反映为视觉结果，代码在后台生成。

判断一个编辑器是不是真正的 WYSIWYG，关键看"编辑视图"和"最终输出"的接近程度。接近程度越高，用户越不需要理解底层代码；但完全一致很难做到，因为最终效果还取决于目标浏览器的渲染、外部 CSS 样式表等因素。

它底层是怎么工作的

WYSIWYG 编辑器并不是"没有代码"，而是把代码藏起来了。典型机制是：

1. 可视化操作：用户在编辑区选中文字、点击工具栏按钮或使用快捷键。
2. 命令转换：编辑器把这些操作翻译成对应的 HTML/XHTML 标签或 CSS 样式。例如点"加粗"生成 <strong> 或 <b>，设置字号生成 style 属性或 class。
3. 代码输出：编辑完成后，编辑器把内部状态序列化成 HTML/XHTML 字符串，交给表单提交或保存到数据库。

以 Asbru Web Content Editor 为例，它把自己定位为"WYSIWYG HTML/XHTML web content editor component"（所见即所得的 HTML/XHTML 网页内容编辑器组件），面向 web 开发者和程序员，用来集成进自己或第三方的 web 应用，让非技术用户也能创建和更新网页内容。它能编辑的内容包括格式化文本、图片、图像映射（image map）、超链接、表格、Flash 动画、Java Applet、表单、邮件链接、锚点/书签、打印分页、内容框、内嵌其他本地或外部网页的框架，以及绝对定位元素。

常见形态

WYSIWYG 不只出现在网页编辑器里，它是一类交互模式的统称：

Asbru 的定位很明确：它是给开发者用的组件，不是给普通用户直接用的成品网站工具。官方说明里特别提示，如果你不是 web 开发者/程序员，应该去看 Asbru Website Manager 和 Asbru Web Content Management 这类开箱即用的建站产品。它的典型用法是替换自己或第三方应用里简单的 TEXTAREA 输入框，比如联系表单、留言板、web 邮件系统、内容管理系统。

和手写 HTML 的取舍

两者不是谁替代谁，而是面向不同的人和任务：

选 WYSIWYG 的理由

• 上手快，几乎不需要培训和技术背景。
• 非技术用户也能独立更新内容，减少对开发者的依赖。
• 可视化操作降低出错概率，不用记标签和属性。

选直接写 HTML 的理由

• 对结构、语义、代码整洁度有完全控制。
• 便于做精细的响应式布局和可访问性处理。
• 不依赖编辑器生成的代码风格。

一个实际的分界点是：内容由谁维护。如果网站内容要交给市场、运营或客户自己更新，WYSIWYG 能显著降低沟通和返工成本；如果页面由开发者一次性构建、很少改动，手写 HTML 更直接。

挑选 WYSIWYG 编辑器要看什么

如果你在评估是否用某个编辑器（包括 Asbru 这类组件），可以从这几个维度比较：

• 跨浏览器、跨平台兼容性：用户用什么浏览器和系统都能正常编辑。Asbru 声称支持 Mac OS X 上的 Safari、Windows 上的 Internet Explorer，以及 Windows、Macintosh、Linux、Unix 上的 Netscape、Mozilla、Firefox/Firebird，还支持 Linux 上的 Epiphany 和 Galeon。
• 是否需要安装客户端：纯浏览器方案不需要用户装软件。Asbru 强调"no client software installation"（无需安装客户端软件）。
• 能编辑的内容范围：是否支持图片、表格、链接、图像映射、CSS 样式等。功能越全，能覆盖的场景越多。
• 输出代码质量：生成的是否是干净的 HTML/XHTML，是否可控。Asbru 提供 XHTML 输出选项。
• 集成难度：能否方便地替换现有输入框、嵌入已有系统。
• 成本：Asbru 官方页面标注"From only $50 per website with any number of users"（每个网站 50 美元起，用户数不限），并带有 "Buy Now" 入口。价格和授权细节以官方页面为准，购买前建议核对当前条款。

一个具体的使用场景

假设你维护一个内部留言板系统，原本的输入框是纯文本 TEXTAREA，用户只能发纯文字。你想让大家能加粗重点、插入链接和图片。做法是把 TEXTAREA 替换成 WYSIWYG 编辑器组件：用户在可视化界面里排版，编辑器在提交时把内容转成 HTML 存入数据库，前台按 HTML 渲染。这样非技术同事不用学任何标签就能发格式丰富的内容，而你作为开发者只需完成一次集成。

反过来，如果你要构建的是一个结构严格、样式统一的营销落地页，且内容很少变动，那么直接用 HTML/CSS 手写、配合版本管理，通常比引入编辑器更可控。

一句话总结

WYSIWYG 是一种"编辑即所见"的交互方式，把 HTML 代码藏在可视化操作背后，让不懂代码的人也能产出富文本内容。它最适合"内容需要被非技术用户频繁更新"的场景；当控制权和代码质量优先于易用性时，直接写 HTML 仍是更好的选择。