SSM使用UEditor富文本编辑器

关注

原创最新推荐文章于 2025-02-18 10:17:49 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

使用idea实现博客项目使用UEditor 富文本编辑器 实现图片上传功能前言 1.做毕设用，苦恼了很久 2.网上的教程东一锤子西一榔头，终于配置好了，做一下记录，希望别人也可以看到 3.如果哪里写错了，或者有更好的方法，还请各位大佬多多指教准备工具官网下载UEditor：https://ueditor.baidu.com/website/download.html 下载完整版和jsp版本一、解压后在idea项目webapp下新建ueditor文件夹，将jsp版... 阅读详情

文章目录

富文本编辑器（UEditor）

1. 下载UEditor富文本编辑器

建议下载 utf8-jsp 版本的，结构目录如下：

下载地址：链接：百度网盘提取码：sjxy

下载解压完成后打开 `index.html` 可查看 `ueditor` 庐山真面目

2. 创建测试项目

注意：在以下步骤之前，你得有一个搭建完成的SSM框架的项目

2.1 在 `SSM` 项目的 `web` 目录下创建 `ueditor` 目录，将下载好的目录解压并导入

2.2 在 `jsp` 文件加下的 `lib` 目录下包含ueditor开发所需jar包，将jar包导入SSM项目中

导入项目后可删除，减小项目的所占内存

3. 创建测试项目

3.1 在web目录下创建一个 `ueditor.jsp`

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>UEditor测试</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
    <style type="text/css">
        div {
            width: 100%;
        }
    </style>
</head>

<body>

<h1>UEditor测试</h1>
<form action="${pageContext.request.contextPath}/ueditor/uploading">
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    <input type="submit" value="提交">
</form>

</body>

<script type="text/javascript">
    // 实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');
</script>
</html>

在下载的 utf8-jsp 中的 index.html 有 ueditor 初始化的内容，上述代码只是选择了本次案例所需的内容并进行修改，如果内容不符合读者所需，可以自行 copy 进行修改

3.2 配置 `springmvc.xml`

因为 SpringMVC 会把 ueditor 加载所需是资源拦截了，所以需要在 springmvc 的配置文件中把资源放行

<!--过滤静态资源-->
<mvc:resources mapping="/ueditor/**" location="/ueditor/"/>

启动Web项目，你会看到如下

说明此时 ueditor 可以在页面显示了

随便填点东西提交，此时可以发现导航栏如下有以 editorValue 提交的属性

3.3 创建 `UeditorController.java`

package com.itheima.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/ueditor")
public class UeditorController {

    @RequestMapping("/uploading")
    public String uploading(String editorValue, Model model){
        // editorValue 为接收富文本编辑器提交的内容
        model.addAttribute("editorValue", editorValue);
        return "ueditorList";
    }
    
}

3.4 编写 `ueditorList.jsp` 页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ueditor接收页面</title>
</head>
<body>
	${editorValue}
</body>
</html>