問題概述

??用戶想創建包含多媒體和格式化文本的網頁內容，卻又沒有時間或者能力去編寫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程序將報表或者表格顯示給用戶，用戶直接在上面進行填寫，這樣用戶填寫的是什么樣子，最終打印出來就是什么樣子，一目了然，也就是所見即所得了

總結

以上是生活随笔為你收集整理的（翻译）所见即所得（WYSIWYG）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。