UEditor 在 JSP 项目中使用完整教程

本教程将引导你一步步将 UEditor 富文本编辑器集成到你的 JSP 项目中，并实现图片、附件的上传功能。

ueditor使用教程 jsp
（图片来源网络，侵删）

第一步：准备工作

  1. 下载 UEditor

    • 访问 UEditor 的官方 GitHub 仓库：https://github.com/fex-team/ueditor
    • 在 Releases 页面下载最新稳定版的 JSP 版本。ueditor-1.4.3.3-jsp.zip。
    • 解压下载的压缩包，你会得到一个名为 ueditor 的文件夹,这就是我们需要的核心文件。

  2. 准备 JSP 开发环境

    • 确保你已经配置好了 JSP 开发环境，例如使用 Eclipse (with JSTL/WDK) 或 IntelliJ IDEA。
    • 准备一个 Web 项目（my-web-app）。

第二步：部署 UEditor 文件

  1. 复制核心文件到 Web 项目

    • 将解压后 ueditor 文件夹中的以下内容，原封不动地复制到你 JSP 项目的 Web 根目录下（通常是 WebContent 或 webapp 目录）。
    • 需要复制的文件夹/文件：
      • ueditor/ (这个文件夹包含了编辑器所有的前端资源，如 JS、CSS、图片等)
      • jsp/ (这个文件夹包含了后端处理上传、配置读取等逻辑的 JSP 文件)

  2. 项目结构示例 完成复制后,你的项目结构应该大致如下：

    ueditor使用教程 jsp
    （图片来源网络，侵删）
    my-web-app/
├── WebContent/
│   ├── index.jsp          (我们稍后要创建的 JSP 页面)
│   ├── ueditor/           (前端核心文件夹)
│   │   ├── dialogs/       (弹窗组件)
│   │   ├── lang/          (语言包)
│   │   ├── themes/        (主题样式)
│   │   ├── third-party/   (第三方库)
│   │   ├── ueditor.config.js (核心配置文件)
│   │   ├── ueditor.all.js  (编辑器核心 JS, 包含所有功能)
│   │   └── ...
│   └── jsp/               (后端处理文件夹)
│       ├── config.json    (【极其重要】后端配置文件)
│       ├── imageUp.jsp    (图片上传处理)
│       ├── fileUp.jsp     (文件上传处理)
│       └── ...
└── src/
    └── ...

第三步：在前端 JSP 页面中引入 UEditor

我们来创建一个 JSP 页面来显示和使用 UEditor。

  1. 创建 index.jsp 在 WebContent 目录下创建一个 index.jsp 文件。

  2. 编写 JSP 代码 在 index.jsp 中,你需要做三件事：

    • 引入 UEditor 的 CSS 和 JS 文件。
    • 创建一个 <textarea> 元素，并给它一个 id，UEditor 将会把这个 textarea 替换成富文本编辑器。
    • 初始化 UEditor 实例。
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>UEditor JSP 教程</title>
    <!-- 引入 UEditor 的 CSS 文件 -->
    <link href="ueditor/themes/default/css/ueditor.css" type="text/css" rel="stylesheet">
    <!-- 引入 JSTL 标签库，方便后续从服务器获取数据 -->
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
</head>
<body>
    <h1>欢迎使用 UEditor</h1>
    <!-- 
        创建一个 textarea，并设置 id。
        这个 id 在初始化 UEditor 时会用到。
        name 属性在表单提交时使用。
    -->
    <script id="editor" type="text/plain" name="content" style="width:1024px;height:500px;"></script>
    <!-- 
        引入 UEditor 的 JS 文件。
        ueditor.config.js 是配置文件。
        ueditor.all.js 是包含了所有功能的完整版。
    -->
    <script type="text/javascript" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        // UE.getEditor 是一个全局函数，用于获取编辑器实例
        // 参数 'editor' 是上面 textarea 的 id
        var ue = UE.getEditor('editor');
        // 可选：监听编辑器内容变化
        ue.ready(function() {
            ue.addListener('contentChange', function() {
                console.log('内容已改变');
            });
        });
    </script>
    <!-- 一个简单的提交按钮 -->
    <form action="saveContent.jsp" method="post">
        <button type="submit">提交内容</button>
    </form>
</body>
</html>

  3. 部署并测试 将你的项目部署到 Tomcat 等服务器上，访问 http://localhost:8080/your-project-name/index.jsp,你应该能看到一个功能完整的富文本编辑器了。

第四步：配置后端（核心步骤）

UEditor 的所有后端操作（如上传、配置读取）都依赖于 jsp 目录下的文件，最关键的是 config.json。

  1. 配置 config.json 打开 WebContent/jsp/config.json 文件，这是 UEditor 的后端总配置文件，你需要修改 imageUrlPrefix 和 imagePathFormat 等配置。

    {
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    // ... 其他配置如 scrawl,snapscreen 等 ...
}

    重要配置项解释：

    • imageUrlPrefix: 图片访问的 URL 前缀。
      • 如果你的图片是直接通过 Web 服务器访问的（Tomcat 的 webapps 目录），并且上传路径在项目根目录下，这里可以留空 。
      • 如果你的图片存放在另一个 CDN 或文件服务器上，你需要在这里填写完整的 URL 前缀，"http://cdn.yourdomain.com"。
    • imagePathFormat: 图片在服务器上的保存路径格式。
      • /upload/image/: 这是相对于 Web 应用根目录的路径。请确保你的 WebContent 目录下有这个文件夹，Tomcat 有写入权限。 你需要手动创建 WebContent/upload/image 文件夹。
      • {yyyy}{mm}{dd}: 按年月日创建子目录,便于管理。
      • {time}{rand:6}: {time} 是时间戳，{rand:6} 是 6 位随机数,确保文件名不重复。

  2. 解决跨域问题（如果需要） 如果你的前端页面和 UEditor 的后端处理程序（jsp 文件）不在同一个域下，会遇到跨域问题，虽然本教程是同域部署，但了解这一点很重要，你需要在 jsp 文件的开头添加响应头。

    打开 WebContent/jsp/imageUp.jsp,在文件最顶部添加：

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- 解决跨域问题 --%>
<%
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Pragma", "no-cache");
    response.setDateHeader("Expires", -1);
    response.setContentType("text/json; charset=utf-8");
%>
<!-- ... 原有代码 ... -->

第五步：处理表单提交

当用户在编辑器中输入内容并点击“提交”按钮后，表单会将编辑器的内容（<textarea> 中的 HTML 代码）发送到服务器。

  1. 创建 saveContent.jsp 这个文件用于接收并处理从 index.jsp 提交过来的内容。

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>保存内容</title>
</head>
<body>
    <%
        // 从 request 中获取 name 为 "content" 的参数
        // 这个 "content" 必须和 index.jsp 中 textarea 的 name 属性一致
        String content = request.getParameter("content");
        // 在实际项目中，这里应该将 content 保存到数据库中
        //  new ArticleService().save(content);
        // 为了演示，我们直接将内容打印出来
        out.println("<h2>你提交的内容如下：</h2>");
        out.println("<hr>");
        // 因为 content 是 HTML，为了正确显示，我们需要使用 <pre> 标签并设置其样式
        // 或者直接输出，但要注意 HTML 转义
        out.println("<div style='border:1px solid #ccc; padding:10px; white-space: pre-wrap;'>");
        out.println(content);
        out.println("</div>");
    %>
    <a href="index.jsp">返回继续编辑</a>
</body>
</html>

  2. 测试提交 回到 index.jsp，在编辑器中输入一些文字，可以设置字体、颜色，插入一张图片（图片会根据 config.json 的配置上传到 /upload/image/ 目录），然后点击“提交内容”按钮，页面会跳转到 saveContent.jsp 并显示你提交的 HTML 内容。

总结与常见问题

  1. 部署：将 ueditor 和 jsp 文件夹复制到 Web 项目根目录。
  2. 前端：在 JSP 中引入 JS/CSS，创建 textarea，用 UE.getEditor() 初始化。
  3. 后端：修改 jsp/config.json，配置上传路径和访问 URL。
  4. 交互：通过 form 提交 textarea 的 name 值到后端 JSP 进行处理。

常见问题：

  • Q: 图片/文件上传失败，提示 "后端配置项没有正常加载" 或 "请求后台配置项http错误"？

    • A: 这是最常见的问题，原因通常是：
      1. jsp 文件夹没有被正确复制到 Web 根目录。
      2. jsp/config.json 文件的路径不正确，或者 UEditor 找不到它，请确保 ueditor.config.js 中的 serverUrl 配置正确，默认是 "../jsp/config.json"，如果你的 jsp 文件夹就在根目录下,这个配置通常是正确的。
      3. config.json 文件中的 JSON 格式有错误（例如多了一个逗号）。

  • Q: 上传的图片无法在页面上显示？

    • A:
      1. 检查 config.json 中的 imageUrlPrefix 是否正确。
      2. 检查 imagePathFormat 配置的路径（如 /upload/image/）是否真实存在于服务器上，Web 服务器（如 Tomcat）有权限写入。
      3. 检查浏览器开发者工具的 Network 面板，查看图片请求的 URL 是什么，对比 imageUrlPrefix + imagePathFormat 生成的路径是否一致。

  • Q: 如何从数据库加载已有内容到编辑器？

    • A: 在初始化编辑器后，使用 setContent() 方法即可。

      var ue = UE.getEditor('editor');
// 假设你从数据库获取的内容存储在变量 'dbContent' 中
var dbContent = "<p>这是从数据库加载的内容。</p><p><strong>支持HTML标签</strong>。</p>";
ue.ready(function() {
    ue.setContent(dbContent);
});

通过以上步骤，你就可以成功地在 JSP 项目中集成和使用 UEditor 了。