百度富文本编辑器的使用

最新推荐文章于 2024-06-25 09:02:21 发布

峰峰崛起的我

最新推荐文章于 2024-06-25 09:02:21 发布

阅读量7.5k

点赞数

分类专栏： javaWeb 编辑器文章标签： javaWeb 文本编辑器

本文链接：https://blog.csdn.net/lw_1220/article/details/90079931

版权

编辑器同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

javaWeb

1 篇文章 0 订阅

订阅专栏

富文本编辑器的使用

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>

完成以上步骤上传图片不能正常显示，需要对以下文件进行配置

显示效果如下：

峰峰崛起的我

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
百度富文本编辑器的使用

富文本编辑器的使用1.百度富文本编辑器的下载地址通过此链接https://ueditor.baidu.com/website/download.html进入下载如下图所示2.新建一个javaweb项目把下载好的百度富文本编辑器拷贝到项目中新建一个index.jsp页面<%@ page language="java" contentType="text/...
复制链接

扫一扫

专栏目录