【jQuery】網頁文字格式設定編輯器xheditor，
網頁文本格式編輯器xheditor是一款優秀的、開源、相容IE6的JQuery外掛程式。現在很多網站都涉及到使用者的互動，很難想象一個沒有輸入框的網站是怎麼樣的，你總不能一個給一個空白的文字框給別人吧？如果讓你自己用javascript或者jquery寫一款文本格式編輯器，費時費力。jQuery外掛程式xheditor是首選。這框外掛程式非常出名、經典，甚至現在正在寫csdn的部落格編輯器，就是在它的基礎上改進過來的，只是比原來的文字編輯器多了一個非常核心的功能而已，就是代碼編輯器，具體如：
一、基本目標
或許你的網站不一定需要程式碼片段的編輯功能，也可以禁止讓使用者上傳圖片，但提供一個讓使用者能夠加粗等、放超級連結、放外鏈圖片的帶有一定格式的編輯器，也是兵家必備。製作一款文字編輯器，如，能夠實現一些word中的基本操作，如加粗、斜體、置中，變顏色等等。下面以JSP為例來說明這款編輯器的用法。PHP與ASPX前端代碼都是一樣的，還是只是那個參數擷取不同而已。
至於怎麼完成表單之間的參數傳遞，就不是本文討論的重點了。具體可以看：
asp也就是vbscript版的《【ASP】串連Access資料庫的登陸系統》（點擊開啟連結）
aspx也就是aps.net當時候還沒有寫編輯記錄的習慣，忘記記下來了。
jsp版的請看《【Filter】利用過濾器Filter解決post傳遞的編碼問題與利用EL運算式簡化參數傳遞》（點擊開啟連結）
php則請看《【php】基本文法與頁面之間數值傳遞》（點擊開啟連結）
我都寫過，都是一些很基礎的東西！
二、基本準備
1、直接上xheditor的官網（點擊開啟連結）擷取最新版本的xheditor文字編輯器，如：
2、在eclipse裡面建立一個工程，在webContent中建立一個js檔案夾，並且在webContent中建立一個edit.jsp用來放置編輯器，一個request.jsp用來輸出結果。php,aspx的親門，也是在你的網站中建立js檔案夾，設定兩個頁面，一個讓使用者輸入，一個輸出使用者的結果就可以了。具體的目錄結構如：
3、下載xheditor.zip之後解壓，把裡面的xheditor打頭的所有檔案夾，src,jquery檔案夾，同時還有xheditor.js檔案放到我們網站的js檔案夾裡面，值得注意的是，即使你的網站本來就有jquery，但還是需要用到xheditor本身的jquery，筆者親測，自己的jquery1.9.11-1.js無法為這個僅需求jquery1.4的xheditor外掛程式，提供支援。
4、重新整理一下在eclipse裡面的jsp工程，把其配到tomcat裡面。
三、製作過程
1、request.jsp，先說jsp用來顯示編輯結果參數的這個頁面，非常簡單。使用了一段被人噴為腦殘的jsp指令碼來擷取參數，實質上，使用xheditor之後，與沒有使用，擷取一個簡單的多行文本編輯框的參數，是一模一樣的，你只要設定好這個多行文字框的name，在這個頁面，擷取這個name就可以了。jsp擷取之前還必須設定編碼！
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>結果</title></head><body>你所編輯的內容是：<%request.setCharacterEncoding("utf-8");String a = request.getParameter("edit");%><%=a%><a href="edit.jsp">返回</a></body></html>2、edit.jsp，這是放置xheditor文字編輯器的頁面，這是關鍵。不過也不難，首先在頁頭引入三個必須的js，這也是xheditor官方要求的，你只要為這個text文字框設定class參數即可。其餘的表單、提交按鈕，按往常一樣寫就可以了。xheditor不過是一個多行表單！
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript" src="js/jquery/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/xheditor.js"></script><script type="text/javascript" src="js/xheditor_lang/zh-cn.js"></script><title>editor</title></head><body><form method="post" action="request.jsp"><textarea name="edit" class="xheditor-simple {skin:'nostyle',width:'640',height:'300',cleanPaste:2}"></textarea><br /><input type="submit" value="提交" /></form></body></html>3、xheditor的class參數設定，可以利用剛才xheditor解壓之後的檔案夾中的wizard.html產生，你可以利用這個代碼產生器，產生你所需要的文字編輯器，省時省力。這個文字編輯器好像來支援檔案上傳的功能。JSP的檔案上傳的響應見《【Servlet】利用Servlet3.0標準與JSTL運算式實現檔案上傳系統，支援圖片上傳後顯示》（點擊開啟連結），之前我做過了，這裡不贅述了。xheditor的檔案上傳按鈕是藏在超級連結裡面的。我覺得沒有必要開放上傳，讓使用者搞外鏈圖片就可以。我現在的編輯器，就是是簡約樣式、無樣式風格，清楚word格式，尺寸為640x300。
4、當然，上面的例子只是馬上輸出使用者的功能而已。如果真正放到互連網上去，還需要在表單發表之前，你還需要進行檢查，如何檢查，我在《【JavaScript】表單提交之前的前台處理檢查三部曲》（點擊開啟連結），存入資料庫之前，還應該對使用者輸入的內容轉義，拿出來消除轉義，具體可以見《【JavaScript】某些字元不轉義可以導致網頁崩潰與涉及逸出字元的顯示方法》（點擊開啟連結）。同時還需要在幕後處理的時候，考慮到sql注入的問題。畢竟網上那群沒事專門黑別人網站的覺得自己好像很牛B似的小混混眾多，經常我們這些搞個小網站，混口飯吃的程式猿。
5、如果還需要離開頁面之前提示，可以參考我之前的《【JavaScript】離開頁面前提示》（點擊開啟連結）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
