（翻譯）所見即所得（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網站中的文章，發現之前有幾篇漏翻譯了（要麼就是從網易部落格啟動遷移到CSDN部落格時丢了），準備陸續将漏翻譯的文章補上。

原文位址：http://ui-patterns.com/patterns/WYSIWYG

[1]其實winform程式中也有用到所見即所得的地方，隻是實作方式不同于網頁上的所見即所得編輯器。網頁上的所見即所得編輯器避免了使用者直接編輯HTML代碼，用一種類似于文本編輯的方式直接編輯網頁内容。winform程式中，一般管理程式都是使用者先将所需要的資訊填寫好，然後列印成響應的報表或者表格。如果也做成所見即所得方式的話，winform程式将報表或者表格顯示給使用者，使用者直接在上面進行填寫，這樣使用者填寫的是什麼樣子，最終列印出來就是什麼樣子，一目了然，也就是所見即所得了