（翻译）所见即所得（WYSIWYG）

问题概述

  用户想创建包含多媒体和格式化文本的网页内容，却又没有时间或者能力去编写HTML语句。

示例

用途

• 用于清晰的展示用户编辑的内容在发布时的样式。WYSIWYG是What You See Is What You Get的开头大写字符缩写，也就是所见即所得；
• 用于网站的用户不习惯用HTML代码或者类似于textile、markdown的标记语言来格式化网页内容；
• 用于降低网站用户添加格式化网页内容的门槛；
• 用于以一种简单的方式将多媒体内容加入到网站的网页内容中，而不需要了解HTML或者其它知识；
• 用于网站用户花时间修正自己编辑的网页内容中的细节。WYSIWYG允许用户在编辑内容时就能够看到最终的效果，这种方式易于编辑又便于查看最终效果，增强了用户对待发布网页内容的信心；
• 如果想保持网页的HTML代码整洁，则不要使用WYSIWYG，因为很多WYSIWYG编辑器自动生成的HTML代码既臃肿又杂乱无章；
• 不要认为WYSIWYG编辑器能用在所有的浏览器中，WYSIWYG编辑器不支持所有的浏览器，即便它支持，也仅支持这些浏览器的最新版本。

解决方案

  网上有很多JavaScript库可以将HTML元素转换为完全可用的所见即所得编辑器，编辑器中的工作区域既支持输入HTML代码，又可以即时显示最终的格式化效果。用户输入的内容以HTML代码的方式保存到数据库中。
  所见即所得编辑器可以根据用户的需要进行定制。可以将不必要的功能排除在网页内容编辑之外。你也可以限制编辑网页内容时不允许插入图片，更改字体颜色和大小，甚至强制用户只能使用预定义的CSS列表。

说明

  WYSIWYG（所见即所得）最初是在WordPerfect 、Microsoft Word等文本编辑程序中引入的，计算机屏幕上文本编辑器中显示的内容与实际打印的效果一致，这是电子文本编辑的一种创新。
  最近，web界面中也引入了所见即所得编辑器。在这之前，编辑网页内容时，区域中直接放置大段的文本，也不包含任何文本格式设置。现在有了所见即所得编辑器，编辑网页内容时看到的效果就是最终显示在网页中的效果。

PS：重新整理之前翻译的ui-patterns网站中的文章，发现之前有几篇漏翻译了（要么就是从网易博客启动迁移到优快云博客时丢了），准备陆续将漏翻译的文章补上。

原文地址：http://ui-patterns.com/patterns/WYSIWYG
[1]其实winform程序中也有用到所见即所得的地方，只是实现方式不同于网页上的所见即所得编辑器。网页上的所见即所得编辑器避免了用户直接编辑HTML代码，用一种类似于文本编辑的方式直接编辑网页内容。winform程序中，一般管理程序都是用户先将所需要的信息填写好，然后打印成响应的报表或者表格。如果也做成所见即所得方式的话，winform程序将报表或者表格显示给用户，用户直接在上面进行填写，这样用户填写的是什么样子，最终打印出来就是什么样子，一目了然，也就是所见即所得了