百度UEditor的简单使用，JSP页面的表单中的内容后台获取和前端配置-结合项目使用
工具：
Myeclipse
jdk jsp
servlet
**第一步：下载包并导入到项目中**
在官网下载 JSP(utf-8)的包，
解压复制（或导入）到项目中并修改名字为ueditor
刚导如会报错，是由于myecplise工具的问题，直接忽略版本错误
右键ueditor的文件夹--》Myeclipse--》Exclude From Validation
将ueditor文件夹下–》jsp文件夹–》lib文件夹中的包复制到 WEB-INF–>lib文件夹中去
**第二步：页面配置
引入UEditor的js包和样式包，并实例化UE**
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>编辑器完整版实例</title>
<!-- 引入相应js文件 -->
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
</head>
<body>
<!--
创建表单区域并实例化一个UEditor实例
提交到servlet中
实例化UE的时候注意 >>textarea标签 name就是后台需要获取的参数名，id是用来实例化UE的名字
-->
<form action="publish"method="post">
类别： <input type="text"name="category"/><br/>
标题：<input type="text"name="title"/><br/>
<textarea name="content" id="myEditor">这里写你的初始化内容</textarea>
<script type="text/javascript">
UE.getEditor('myEditor');
</script>
<input type="submit"value="提交"/>
</form>
</body>
</html>
**第三步：
***最重要的一步***，设置ueditor的实例和配置文件的根目录，最好是在项目下的绝对位置**
第四步 web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<display-name></display-name>
<servlet>
<servlet-name>publish</servlet-name>
<servlet-class>test.publi</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>publish</servlet-name>
<url-pattern>/publish</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
使用myeclipse部署，并且使用浏览器查看效果如
效果图：
在myeclipse中预览只有这种效果，
发布后使用浏览器登陆查看效果就出来了
第三步：servl处理类代码，接受前台传来的参数
为了方便就没写其他的直接就打印出来验证一下是否接收到，编码是否正确。
package test;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class publi extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/**
* 因为我的MyEclipse的jsp页面将默认编码格式修改为了UTF-8
* 并且工作空间和项目都是使用的UTF-8的格式，所以有以下三个代码。不然传递到后台的数据是乱码
*
* */
response.setContentType("text/html");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//获取前台传来的参数
System.out.println(request.getParameter("category"));
System.out.println(request.getParameter("title"));
System.out.println(request.getParameter("content"));
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
至此百度UEditor的结合JSP获取表单内容已经完成，以至于其他的功能：比如上传图片等下次再说
扫一扫
934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
