問題概述

??用戶想創(chuàng)建包含多媒體和格式化文本的網(wǎng)頁內(nèi)容，卻又沒有時(shí)間或者能力去編寫HTML語句。

示例

用途

• 用于清晰的展示用戶編輯的內(nèi)容在發(fā)布時(shí)的樣式。WYSIWYG是What You See Is What You Get的開頭大寫字符縮寫，也就是所見即所得；
• 用于網(wǎng)站的用戶不習(xí)慣用HTML代碼或者類似于textile、markdown的標(biāo)記語言來格式化網(wǎng)頁內(nèi)容；
• 用于降低網(wǎng)站用戶添加格式化網(wǎng)頁內(nèi)容的門檻；
• 用于以一種簡單的方式將多媒體內(nèi)容加入到網(wǎng)站的網(wǎng)頁內(nèi)容中，而不需要了解HTML或者其它知識；
• 用于網(wǎng)站用戶花時(shí)間修正自己編輯的網(wǎng)頁內(nèi)容中的細(xì)節(jié)。WYSIWYG允許用戶在編輯內(nèi)容時(shí)就能夠看到最終的效果，這種方式易于編輯又便于查看最終效果，增強(qiáng)了用戶對待發(fā)布網(wǎng)頁內(nèi)容的信心；
• 如果想保持網(wǎng)頁的HTML代碼整潔，則不要使用WYSIWYG，因?yàn)楹芏郬YSIWYG編輯器自動生成的HTML代碼既臃腫又雜亂無章；
• 不要認(rèn)為WYSIWYG編輯器能用在所有的瀏覽器中，WYSIWYG編輯器不支持所有的瀏覽器，即便它支持，也僅支持這些瀏覽器的最新版本。

解決方案

??網(wǎng)上有很多JavaScript庫可以將HTML元素轉(zhuǎn)換為完全可用的所見即所得編輯器，編輯器中的工作區(qū)域既支持輸入HTML代碼，又可以即時(shí)顯示最終的格式化效果。用戶輸入的內(nèi)容以HTML代碼的方式保存到數(shù)據(jù)庫中。
??所見即所得編輯器可以根據(jù)用戶的需要進(jìn)行定制。可以將不必要的功能排除在網(wǎng)頁內(nèi)容編輯之外。你也可以限制編輯網(wǎng)頁內(nèi)容時(shí)不允許插入圖片，更改字體顏色和大小，甚至強(qiáng)制用戶只能使用預(yù)定義的CSS列表。

說明

??WYSIWYG（所見即所得）最初是在WordPerfect 、Microsoft Word等文本編輯程序中引入的，計(jì)算機(jī)屏幕上文本編輯器中顯示的內(nèi)容與實(shí)際打印的效果一致，這是電子文本編輯的一種創(chuàng)新。
??最近，web界面中也引入了所見即所得編輯器。在這之前，編輯網(wǎng)頁內(nèi)容時(shí)，區(qū)域中直接放置大段的文本，也不包含任何文本格式設(shè)置。現(xiàn)在有了所見即所得編輯器，編輯網(wǎng)頁內(nèi)容時(shí)看到的效果就是最終顯示在網(wǎng)頁中的效果。

PS：重新整理之前翻譯的ui-patterns網(wǎng)站中的文章，發(fā)現(xiàn)之前有幾篇漏翻譯了（要么就是從網(wǎng)易博客啟動遷移到CSDN博客時(shí)丟了），準(zhǔn)備陸續(xù)將漏翻譯的文章補(bǔ)上。

原文地址：http://ui-patterns.com/patterns/WYSIWYG
[1]其實(shí)winform程序中也有用到所見即所得的地方，只是實(shí)現(xiàn)方式不同于網(wǎng)頁上的所見即所得編輯器。網(wǎng)頁上的所見即所得編輯器避免了用戶直接編輯HTML代碼，用一種類似于文本編輯的方式直接編輯網(wǎng)頁內(nèi)容。winform程序中，一般管理程序都是用戶先將所需要的信息填寫好，然后打印成響應(yīng)的報(bào)表或者表格。如果也做成所見即所得方式的話，winform程序?qū)?bào)表或者表格顯示給用戶，用戶直接在上面進(jìn)行填寫，這樣用戶填寫的是什么樣子，最終打印出來就是什么樣子，一目了然，也就是所見即所得了

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。