百度富文本编辑器的使用
富文本编辑器的使用
1.百度富文本编辑器的下载地址
通过此链接https://ueditor.baidu.com/website/download.html进入下载
如下图所示
2.新建一个javaweb项目
把下载好的百度富文本编辑器拷贝到项目中
新建一个index.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>富文本编辑器</title>
<script type="text/javascript" charset="UTF-8" src="utf8-jsp/ueditor.config.js"></script>
<script src="utf8-jsp/ueditor.all.min.js" type="text/javascript" charset="utf-8"></script>
<script src="utf8-jsp/lang/zh-cn/zh-cn.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="">
<form action="UJeditorServlet1" method="post">
<h1>完整的富文本编辑器的使用</h1>
<script id="editor" type="text/plain" style="width: 600px;height: 200px;"></script>
<input type="submit" value="提交"/>
</form>
</div>
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>
</body>
</html>
新建一个servlet
package Servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/**
* Servlet implementation class Editor
*/
public class UJeditorServlet1 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UJeditorServlet() {
super();
// TODO Auto-generated constructor stub
}/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String content = request.getParameter("editorValue");
if(content != null) {
request.setAttribute("content",content);
request.getRequestDispatcher("content.jsp").forward(request, response);
}else {
response.getWriter().append("内容为空");
}
}/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}}
表单form中的action中的路径和servlet中地址保持一致
然后在新建一个content.jsp页面接受上传的数据
<%@ page language="java" contentType="text/html; charset=UTF-8"
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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<base href="<%=basePath%>">
</head>
<body>
<%
out.print(request.getRealPath(""));
%>
<div> ${content} </div>
</body>
</html>
完成以上步骤上传图片不能正常显示 ,需要对以下文件进行配置
显示效果如下:
.