UEditor文档在Servlet项目上的应用

发布于：2025-05-01 ⋅ 阅读:(36) ⋅ 点赞:(0)

UEditor 是一款功能强大的富文本编辑器，在项目中应用广泛。

Ueditor使用

引入 UEditor

  1. 下载 UEditor：从 UEditor 官方网站（ueditor 官网）下载适合项目需求的版本。
  2. 解压文件：将下载的压缩包解压到项目的静态资源目录下，例如在 Web 项目中，可将其解压到webapp目录下的static文件夹中。
  3. 引入相关文件：在需要使用 UEditor 的页面中，通过 HTML 的<script>和<link>标签引入 UEditor 的 JavaScript 和 CSS 文件。

 初始化 UEditor

在页面的 JavaScript 代码中，使用以下代码初始化 UEditor：

var ue = UE.getEditor('editor', {
    // 在这里可以配置UEditor的各种参数
    toolbars: [
        // 定义工具栏按钮
        ['source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'fontsize']
    ],
    // 其他配置项
    autoHeightEnabled: true,
    autoFloatEnabled: false
});

其中，'editor'是页面中用于显示 UEditor 的<textarea>或<div>元素的 ID。通过配置toolbars可以定义显示哪些工具栏按钮，还可以配置其他参数如autoHeightEnabled（自动调整高度）、autoFloatEnabled（自动浮动工具栏）等。

创建demo文件

解压下载的包，在解压后的目录创建 demo.html 文件，填入下面的html代码（如果不是本目录下建立要在WEB—INF下的lib中添加ueditor-1.1.2.jar）

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>

在浏览器打开demo.html

如果看到了下面这样的编辑器，恭喜你，初次部署成功！

 

内容获取与提交

获取内容：在表单提交或其他需要获取 UEditor 内容的地方，使用ue.getContent()方法获取编辑器中的富文本内容。例如

var content = ue.getContent();
// 将内容设置到隐藏域或直接作为表单数据提交
document.getElementById('hiddenContent').value = content;

提交内容：将获取到的内容作为表单数据提交到后端服务器。可以通过表单的submit方法提交，也可以使用 AJAX 进行异步提交。例如，使用 AJAX 提交的代码如下：

$.ajax({
    url: 'yourServletUrl',
    type: 'post',
    data: {
        content: content
    },
    success: function (result) {
        // 处理服务器返回的结果
    },
    error: function () {
        // 处理错误
    }
});

后端接收与处理

在后端的 Servlet 或其他处理程序中，通过request.getParameter("content")获取提交的 UEditor 内容。然后可以将其存储到数据库中，或者进行其他相应的处理。例如，在 Java Servlet 中：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String content = request.getParameter("content");
    // 对content进行处理，如存储到数据库
    // ...
    response.getWriter().write("success");
}

完整项目代码： 

student.sql数据表：

CREATE TABLE `student` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL,
  `age` int(11) DEFAULT NULL,
  `sex` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL,
  `introduce` text COLLATE utf8mb4_bin,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;

add.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/add.js" defer></script>
<style>
.addModel, .deleteModel, .updateModel {

	margin-top: 20px;
	border: 5px, solid yellow;
	padding;
	5
	px;
}
</style>
</head>
<body>
	<div class='addModel'>
		姓名：<input type='text' class='addName'><br> 
		年龄：<input type='text' class='addAge'><br> 
		性别：<input type='text'class='addSex'><br> 
		自我介绍<br>
		   <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>
			<input type='button' value='添加'class='addBtn'> 
			<input type='button' value='取消' class='back'>
	</div>
</body>
</html>

add.js代码：

var ue=UE.getEditor('container');
//点取消小模块隐藏	
	$(".back").click(function(){
//	$(".addModel").css("display","none")
//	$(".updateModel").css("display","none")
//	$(".deleteModel").css("display","none")
		location.href="student.html"
	})
//添加
   $(".addBtn").click(function(){
	  
	   
    var name = $(".addName").val().trim();
    var sex = $(".addSex").val().trim();
    var age = $(".addAge").val().trim();
    var introduce=ue.getContent();

    if (name === "") {
        alert("姓名不能为空");
        return;
    }
    if (sex === "") {
        alert("性别不能为空");
        return;
    }
    if (age === "") {
        alert("年龄不能为空");
        return;
    }

    $.ajax({
        url: "AddServlet1",
        type: "post", // 修正拼写错误
        data: { name, age, sex,introduce},
        success: function (value) {
            alert(value);
            location.href="student.html"
        },
        error: function () {
            alert("出错啦");
        }
    });
});

 servlet代码：

package com.qcby.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.qcby.db.MysqlUtil;

/**
 * Servlet implementation class AddServlet1
 */
@WebServlet("/AddServlet1")
public class AddServlet1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddServlet1() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name=request.getParameter("name");
		String age=request.getParameter("age");
		String sex=request.getParameter("sex");
		String introduce=request.getParameter("introduce");
		introduce=introduce.replaceAll("\"", "\'");
		String sql ="insert into student(name,age,sex,introduce) values(\""+name+"\","+age+",\""+sex+"\",\""+introduce+"\")";
		System.out.println(sql);
		 int num=MysqlUtil.add(sql);
		    String res="worng";
		    if(num>0) {
		    	res="添加成功";
		    }
		    response.setCharacterEncoding("utf-8");
		    response.getWriter().write(res);
		
		
		
	}

}

package com.qcby.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.qcby.db.MysqlUtil;

/**
 * Servlet implementation class UpdateServlet1
 */
@WebServlet("/UpdateServlet1")
public class UpdateServlet1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public UpdateServlet1() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		System.out.println("update post成功");
		 String id = request.getParameter("id");
	       String name = request.getParameter("name");
	       String age = request.getParameter("age");
	       String sex = request.getParameter("sex");
			String introduce=request.getParameter("introduce");
		       // 检查 introduce 是否为 null
	        if (introduce != null) {
	            introduce = introduce.replaceAll("\"", "\'");
	        } else {
	            introduce = ""; // 若为 null，将其设为一个空字符串
	        }
	        String sql = "UPDATE student set name=\""+name+"\",age="+age+",sex=\""+sex+"\",introduce=\""+introduce+"\" where id="+id+";";
	        int num=MysqlUtil.update(sql);
	        String res="worng";
		    if(num>0) {
		    	res="欢迎入住！！";
		    }
		    response.setCharacterEncoding("utf-8");
		    response.getWriter().write(res);
	
	}

}

添加： 

 修改：

 

问题：

1 引入文件时会报错

如上边的图所示，在引入Editor时会报错，1.原因时jsp文件没放到正确的位置2.  "imageUrlPrefix": "", /* 图片访问路径前缀 */需要添加项目名。

 2. 空指针异常

在 UpdateServlet1 的 doPost 方法中，introduce=introduce.replaceAll("\"", "\'"); 这行代码会报错。原因是当 request.getParameter("introduce") 获取到的 introduce 为 null（即前端请求未传递该参数）时，对 null 对象调用 replaceAll 方法会引发 NullPointerException。

3.SQL 注入风险

构建 SQL 语句时采用字符串拼接的方式，如 String sql = "UPDATE student set name=\"" + name + "\",age=" + age + ",sex=\"" + sex + "\",introduce=\"" + introduce + "\" where id=" + id + ";";。这种方式存在严重的 SQL 注入风险，恶意用户可通过构造特殊输入改变 SQL 语句原意，执行非法操作。

4. 参数处理问题：

  • 参数为空或格式错误：对于从请求中获取的参数，如 id、name、age、sex、introduce 等，未进行充分的空值检查和格式验证。若 id 或 age 为空，或者 age 无法转换为整数（在 pstmt.setInt(2, Integer.parseInt(age)); 时），会抛出 NullPointerException 或 NumberFormatException。
  • 参数名称不匹配：前端传递参数的名称可能与后端 request.getParameter 方法中使用的参数名称不一致，导致获取不到对应的值，如前端传递的 introduce 参数名与后端获取时使用的名称不同。

5. “ ，‘ 问题：

introduce = introduce.replaceAll("\"", "\'"); 这行代码的目的是将字符串 introduce 里的所有双引号 " 替换为单引号 '。不过，在实际运用时会存在一些问题和需要留意的地方，下面为你详细分析。replaceAll 是 Java 中 String 类的一个方法，其功能是用指定的替换字符串替换原字符串里所有匹配给定正则表达式的子字符串。在这个代码里，正则表达式 "\"" 代表双引号，而 "\'" 代表单引号。因此，这行代码会把 introduce 字符串里的所有双引号替换成单引号。

    网站公告

    今日签到

    点亮在社区的每一天
    去签到

    热门文章

    最新发布