What You See Is What You Get.

一、问题总结

用户希望创建包含富媒体和格式化文本的内容，但是没有编写 HTML 的知识和时间。

二、截图示例

image.png

三、参考用法

  • 当你想让用户清楚的知道他们的内容发布后会是什么样子的时候。
  • 当站点的用户不习惯使用 HTML 代码，或诸如 Textile 或 Markdown 之类的标记语言来格式化文本时使用。
  • 用于降低让你的用户，向你的网站添加格式化内容的障碍。
  • 当你需要一种简便的方法将媒体集成到不需要 HTML 或任何其他语法知识的网站格式化内容中时，可以使用此方法。
  • 当用户倾向于花时间校正其内容上的小细节时使用。所见即所得（WYSIWYG）使用户可以在编辑时查看格式化的结果，这增强了他们的信心，并提供了快速、美观的结果。
  • 如果要保持 HTML 语法的清洁，建议不要使用。许多所见即所得的编辑器都会产生肿且不整洁的 HTML 代码。
  • 如果要使编辑器在所有浏览器中都起作用，建议不要使用。所见即所得（WYSIWYG）编辑器很少支持所有浏览器，如果支持，通常只是最新版本的浏览器。

四、解决方案

在线有许多 javascript 库可以将 <textarea/> HTML 元素转换成功能齐全的所见即所得（WYSIWYG）编辑器。 编辑器显示一个既是输入又是最终格式化输出的工作区。 内容以 HTML 的形式存储在数据库中。

编辑器可以根据用户的需要进行定制，当然，你可以禁用不必要的功能。也可以选择不允许图像插入、篡改字体颜色或大小，甚至强迫用户只使用预定义的 CSS 类列表。

五、基本原理

WYSIWYG 最初是在 WordPerfect 和 Microsoft Word 等文字处理器中引入的。 当时这是一种革命性的文档编写方式，屏幕上的编辑器可以模仿打印出来的结果。

目前，所见即所得编辑器被引入到 web 表单中。以前，长文本被插入到 <textarea/> 字段中，没有任何格式选项。 所见即所得（WYSIWYG）编辑器现在允许输入模拟屏幕上将看到的内容。

附录

[1] 原文地址