富文本編輯器-Ueditor傳值

時間 2019-11-11

標籤文本編輯器 ueditor 简体版

原文原文鏈接

前兩天研究了一下富文本編輯器Ueditor的使用和配置，而且咱們已經能夠正常的在頁面上編輯內容到富文本編輯器中，那麼咱們如何將輸入的內容傳到數據庫中呢 ? Listen carefully.javascript

首先介紹一下環境配置：css

JDK-9.0.1
html

MySql的數據庫java

Tomcat 8.0mysql

Eclipsejquery

包結構ajax

（ps：那個報錯對項目沒有影響）
sql

在前幾天的基礎上，咱們要對Ueditor的配置按照以下修改數據庫

UEditor的配置：

    在Eclipse中新建一個Web項目，將utf8-jsp複製到項目的WebContent（或WebRoot）下面；

    將utf8-jsp/jsp/lib下的全部jar包複製到WebContent/WEB-INF/lib中

    修改utf8-jsp/jsp/config.json文件，配置以下：

        "imageUrlPrefix": "/Ueditor", /* 圖片訪問路徑前綴  通常使用：/項目名稱 */
        "imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */

    修改utf8-jsp/ueditor.config.js文件，配置以下：

        最開始添加一行命令：window.UEDITOR_HOME_URL = "/Ueditor/utf8-jsp/";

        經過配置toolbars屬性來設置用戶能夠使用的功能。

BUG修改：（1）修改utf8-jsp/ueditor.config.js中第285行左右（scaleEnabled的默認值無效）：

	,scaleEnabled:true//開啓scaleEnabled，自動長高失效以固定編輯器的高度，當編輯內容超過期，會自動出現滾動條。

接着咱們在數據庫中建立一個news的表json

CREATE TABLE `news` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `title` VARCHAR(255) DEFAULT NULL,
  `content` TEXT,
  `publishtime` DATETIME DEFAULT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=INNODB DEFAULT CHARSET=utf8;

而後咱們在WebContent下建立ut.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新聞發佈</title>
<style type="text/css">
.left {
	float: left;
}

.wd10 {
	width: 10%;
}

.wd90 {
	width: 90%;
}

.he40 {
	height: 40px;
	line-height: 40px;
}

.he500 {
	height: 500px;
}
</style>
<script type="text/javascript" charset="utf-8"
	src="utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
	src="utf8-jsp/ueditor.all.min.js">
	
</script>
<script type="text/javascript" charset="utf-8"
	src="utf8-jsp/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.2.js"></script>
</head>
<body>
	<div class="he40"
		style="background: blue; color: white; margin-bottom: 20px;">發佈新聞</div>
	<div>
		<div class="left wd10 he40">新聞標題：</div>
		<div class="left wd90 he40">
			<input type="text" id="title" value=""
				style="width: 800px; height: 35px;" />
		</div>
	</div>
	<div>
		<div class="left wd10 he500">新聞內容：</div>
		<div class="left wd90 he500">
			<script type="text/plain" id="content"
				style="width: 800px; height: 350px;"></script>
		</div>
	</div>
	<br>
	<br>
	<br>
	<br>
	<div style="margin-top: 100px;">
		<div class="left he40" style="width: 100%; text-align: center;">
			<input type="button" id="tjbtn" value="提交"
				style="width: 80px; height: 35px;" />
		</div>
	</div>
</body>
<script type="text/javascript">
	var ue = UE.getEditor('content');
	$('#tjbtn').click(
			function() {
				$.ajax({
					url : "Publish",
					type : 'post',
					data : "title=" + $('#title').val() + "&content="
							+ encodeURIComponent(ue.getContent()),
					dataType : "html",
					success : function(re) {
						$('#title').val('');
						ue.execCommand('cleardoc');
						alert(re);
					}
				});
			});
</script>
</html>

上述代碼中，咱們在html頁面上引入了Ueditor，咱們在js代碼塊中，對提交(tjbtn)按鈕進行了ajax異步請求處理。

其次咱們在src目錄中建立一個Servlet文件，名爲：Publish 基於publish包下

Publish.java

package publish;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Publish")
public class Publish extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private static final String driver="com.mysql.jdbc.Driver";
	private static final String url="jdbc:mysql://localhost:3306/mybatis";
	private static final String user="root";
	private static final String password="root";   
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Publish() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String title=request.getParameter("title").trim();
		String content=request.getParameter("content").trim();
		System.out.println("title:"+title+"\ncontent:"+content);
		String restr="";
		Connection con;
		try{
			Class.forName(driver);
			con=DriverManager.getConnection(url,user,password);
			Statement st=con.createStatement();
			String sql="INSERT INTO news SET title='"+title+"',content='"+content+"',publishtime=NOW();";
			System.out.println(sql);
			st.executeUpdate(sql);
			restr="上傳成功";
			st.close();
			con.close();
		}catch(Exception e){
			e.printStackTrace();
			restr="上傳失敗";
		}
		response.setContentType("text/html;charset=UTF-8;");
		PrintWriter out=response.getWriter();
		out.print(restr);
		out.flush();
		out.close();
	}
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

在上述代碼中，咱們先鏈接了數據庫，而後在Get請求中，咱們用request.getParameter方法獲取了從頁面傳過來的Title和Content的值。而後用sql的插入語句將這兩個值傳入到數據庫中，最後關閉數據庫鏈接。

運行效果：

咱們在新聞標題裏寫上:Back_YeJing is good boys，在新聞內容裏面寫上"琵琶行"，而後點擊提交。這時候會彈出提交成功的警告框。而後咱們去數據庫中查看

總結

從數據庫中的只來看，咱們在Ueditor中傳值這個功能是成功的，可是在Content中的內容會加入一些html的tag。這是由於Ueditor能夠自動將你插入的文字轉換成html代碼，因此當content裏面的內容傳入到數據庫中時，這些tag也會隨之傳入數據庫中。