您的位置：首页 > 产品设计 > UI/UE

百度UEditor的简单使用，JSP页面的表单中的内容后台获取和前端配置-结合项目使用

2017-12-11 15:39 881 查看

百度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/
aba4
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获取表单内容已经完成，以至于其他的功能：比如上传图片等下次再说

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航