富文本编辑器-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也会随之传入数据库中。