1. 程式人生 > >WEB專案中使用UEditor(富文字編輯器)

WEB專案中使用UEditor(富文字編輯器)

Ueditor富文字編輯器是在很多專案裡經常用到的框架,是百度開發團隊開發的一款很好用的富文字編輯器

下面就是我在一個系統裡用到的,有了富文字編輯器,管理員使用起來不是很方便?

所以本部落格介紹這個富文字編輯器的使用哈!覺得寫得不錯的請點贊哈,有建議歡迎提哈!^V^

下載富文字編輯器後,我們開啟MyEclipse或者其它編輯軟體,選擇file->import,選擇檔案系統,匯入下載好的Ueditor

然後啟動tomcat伺服器

這個要根據你的專案進行修改的哈

可以輸出這個,什麼編輯器匯入成功

引入js,charset屬性設定為UTF-8的,因為我的系統預設是UTF-8的

<span style="font-size:18px;"><script type="text/javascript" charset="UTF-8" src="<%=basePath %>ueditor1_4_3_2/ueditor.config.js"></script>
    <script type="text/javascript" charset="UTF-8" src="<%=basePath %>ueditor1_4_3_2/ueditor.all.min.js"> </script></span>

複製ueditor裡面的index,html程式碼,這個要根據需要去複製的

<span style="font-size:18px;"><script type="text/javascript">

    //例項化編輯器
    //建議使用工廠方法getEditor建立和引用編輯器例項,如果在某個閉包下引用該編輯器,直接呼叫UE.getEditor('editor')就能拿到相關的例項
    var ue = UE.getEditor('editor');


  
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以獲得編輯器的內容");
        arr.push("內容為:");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }
    
   
</script></span>

因為我做的系統只要實現將編輯的文字和樣式一起寫入資料庫,所以只要使用getContext方法就可以

在form表單里加入:

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

注意這些屬性都不用隨便修改的哦

獲取文字和文字樣式的參考程式碼,

String introduction = new String(request.getParameter("editorValue").getBytes("iso-8859-1"),"UTF-8");
  這個就是獲取文字和文字樣式的程式碼,然後下面的程式碼只是參考的,只要用String introduction = new String(request.getParameter("editorValue").getBytes("iso-8859-1"),"UTF-8");
  這程式碼就可以獲取內容

public class AddSpotInfoServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	/**
	 * 
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		request.setCharacterEncoding("UTF-8");

		String introduction = new String(request.getParameter("editorValue").getBytes("iso-8859-1"),"UTF-8");
		String picture = Constant.ImgPath.path;
		String position = new String(request.getParameter("position").getBytes("iso-8859-1"),"UTF-8");
		String priceString = new String(request.getParameter("price").getBytes("iso-8859-1"),"UTF-8");
		Double price = Double.parseDouble(priceString);
		String sortString = new String(request.getParameter("sort").getBytes("iso-8859-1"),"UTF-8");
		int spot_sort = Integer.parseInt(sortString);
//		String timeString = new String(request.getParameter("time").getBytes("iso-8859-1"),"UTF-8");
//		Date time = Date.valueOf(timeString);
		String tour_project = new String(request.getParameter("tour_project").getBytes("iso-8859-1"),"UTF-8");
		
		Spot spot = new Spot();
		spot.setIntroduction(introduction);
		spot.setPicture(picture);
		spot.setPosition(position);
		spot.setPrice(price);
		spot.setSpot_sort(spot_sort);
		spot.setTour_project(tour_project);
		
		SpotDAO spotDao = new SpotDAOImpl();
		boolean flag = spotDao.addInfo(spot);
		if(flag){
			response.sendRedirect(Constant.WEB_URL_SPOT_SERVLET);
		}
		
		out.flush();
		out.close();
	}

	/**
	 * 
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

ok,可以將文字和樣式一起寫入資料庫了,哈哈哈,^V^