springboot下ueditor上传功能的实现及遇到的问题

2024-10-02 03:14:27

前言

本文主要写的是：springboot下ueditor上传功能的实现及遇到的一些问题的处理

整体项目结构展示

Springboot整合ueditor及上传功能实现的具体步骤

1、下载ueditor-1.4.3.3

这个在官网下载就行，不过貌似utf-8版本的没有资源了，源码版的下了几次都中断了，最终我是从第三方下的

2、新建一个测试页面

ueditor的根目录下有一个index.html，用它就行，源码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>完整demo</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <!-- 将config.json放在保存文件的根目录位置 -->
  <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.js"> </script>
</head>
<body>
<div>
  <h1>UEditor演示</h1>
  <script id="editor" type="text/plain" style="width:100%;height:330px;"></script>
</div>
<div id="btns">
  <div>
    <button οnclick="getAllHtml()">获得整个html的内容</button>
    <button οnclick="getContent()">获得内容</button>
    <button οnclick="setContent()">写入内容</button>
    <button οnclick="setContent(true)">追加内容</button>
    <button οnclick="getContentTxt()">获得纯文本</button>
    <button οnclick="getPlainTxt()">获得带格式的纯文本</button>
    <button οnclick="hasContent()">判断是否有内容</button>
    <button οnclick="setFocus()">使编辑器获得焦点</button>
    <button οnmοusedοwn="isFocus(event)">编辑器是否获得焦点</button>
    <button οnmοusedοwn="setblur(event)" >编辑器失去焦点</button>
  </div>
  <div>
    <button οnclick="getText()">获得当前选中的文本</button>
    <button οnclick="insertHtml()">插入给定的内容</button>
    <button id="enable" οnclick="setEnabled()">可以编辑</button>
    <button οnclick="setDisabled()">不可编辑</button>
    <button οnclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
    <button οnclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
    <button οnclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
  </div>
  <div>
    <button οnclick="getLocalData()" >获取草稿箱内容</button>
    <button οnclick="clearLocalData()" >清空草稿箱</button>
  </div>
</div>
<div>
  <button οnclick="createEditor()">
  创建编辑器</button>
  <button οnclick="deleteEditor()">
  删除编辑器</button>
</div>
<script type="text/javascript">
  //实例化编辑器
  //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
  var ue = UE.getEditor('editor');
  function isFocus(e){
    alert(UE.getEditor('editor').isFocus());
    UE.dom.domUtils.preventDefault(e)
  }
  function setblur(e){
    UE.getEditor('editor').blur();
    UE.dom.domUtils.preventDefault(e)
  }
  function insertHtml() {
    var value = prompt('插入html代码', '');
    UE.getEditor('editor').execCommand('insertHtml', value)
  }
  function createEditor() {
    enableBtn();
    UE.getEditor('editor');
  }
  function getAllHtml() {
    alert(UE.getEditor('editor').getAllHtml())
  }
  function getContent() {
    var arr = [];
    arr.push("使用editor.getContent()方法可以获得编辑器的内容");
    arr.push("内容为：");
    arr.push(UE.getEditor('editor').getContent());
    alert(arr.join("\n"));
  }
  function getPlainTxt() {
    var arr = [];
    arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
    arr.push("内容为：");
    arr.push(UE.getEditor('editor').getPlainTxt());
    alert(arr.join('\n'))
  }
  function setContent(isAppendTo) {
    var arr = [];
    arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
    UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
    alert(arr.join("\n"));
  }
  function setDisabled() {
    UE.getEditor('editor').setDisabled('fullscreen');
    disableBtn("enable");
  }

  function setEnabled() {
    UE.getEditor('editor').setEnabled();
    enableBtn();
  }

  function getText() {
    //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
    var range = UE.getEditor('editor').selection.getRange();
    range.select();
    var txt = UE.getEditor('editor').selection.getText();
    alert(txt)
  }

  function getContentTxt() {
    var arr = [];
    arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
    arr.push("编辑器的纯文本内容为：");
    arr.push(UE.getEditor('editor').getContentTxt());
    alert(arr.join("\n"));
  }
  function hasContent() {
    var arr = [];
    arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
    arr.push("判断结果为：");
    arr.push(UE.getEditor('editor').hasContents());
    alert(arr.join("\n"));
  }
  function setFocus() {
    UE.getEditor('editor').focus();
  }
  function deleteEditor() {
    disableBtn();
    UE.getEditor('editor').destroy();
  }
  function disableBtn(str) {
    var div = document.getElementById('btns');
    var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
    for (var i = 0, btn; btn = btns[i++];) {
      if (btn.id == str) {
        UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
      } else {
        btn.setAttribute("disabled", "true");
      }
    }
  }
  function enableBtn() {
    var div = document.getElementById('btns');
    var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
    for (var i = 0, btn; btn = btns[i++];) {
      UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
    }
  }

  function getLocalData () {
    alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
  }

  function clearLocalData () {
    UE.getEditor('editor').execCommand( "clearlocaldata" );
    alert("已清空草稿箱")
  }
</script>
</body>
</html>

3、引入上传所需的jar包

<dependency>
 <groupId>com.gitee.qdbp.thirdparty</groupId>
 <artifactId>ueditor</artifactId>
 <version>1.4.3.3</version>
</dependency>
<dependency>
 <groupId>commons-codec</groupId>
 <artifactId>commons-codec</artifactId>
</dependency>
<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3.1</version>
</dependency>
<dependency>
 <groupId>commons-io</groupId>
 <artifactId>commons-io</artifactId>
 <version>2.5</version>
 <scope>compile</scope>
</dependency>
<dependency>
 <groupId>org.json</groupId>
 <artifactId>json</artifactId>
</dependency>

4、新建上传文件保存目录文件夹，如下

其中的config.json是从ueditor-1.4.3.3的文件夹里拷过来，因为我发现默认上传文件路径就是config.json所在目录，而且springboot下我试了配置imagePathFormat并没有什么用。

5、新建UeditorController

用于读取ueditor.json配置文件，同时实现上传方法（当然这里我们直接使用了ueditor.jar的上传，因此显得很简单，但如果要我们自己写那就有一堆代码量了）

import com.baidu.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.util.ClassUtils;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;

/**
 * 百度富文本编辑器
 * 描述1：config.json中配置的如图片大小限制（imageMaxSize）文件类型等在页面js中已经验证过了，后台不需要在处理
 * 描述2：使用ueditor.jar的话就不需要自己
 * 描述3：config.json中imageUrlPrefix配置举例："imageUrlPrefix": "/fileupload/ueditor"
 * 描述3：config.json中imagePathFormat配置举例："imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}"
 * 描述4：imageUrlPrefix + imagePathFormat 为上传文件的访问路径
 *
 * zkh
 * 2019年11月14日 9:09
 */
@Controller
public class UeditorController {

  // /ueditor/jsp/config.json文件所在的父目录，上传文件默认根目录为config.json文件所在目录
  private String configJsonParentPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/fileupload/ueditor";

  /**
   * UEditor初始化时会以get方式请求serverUrl地址，并且需要在action=config时返回UEditor配置文件信息
   * 描述：使用ueditor.jar包中的ActionEnter的话，就不需要自己再去实现其上传功能，因为ActionEnter已经帮我们实现了
   */
  @RequestMapping("ueditor")
  public void getEditorConfig(HttpServletRequest request, HttpServletResponse response, String action) {
    response.setContentType("application/json");
    try {
      String exec = new ActionEnter(request, configJsonParentPath).exec();
      if(action!=null && (action.equals("listfile") || action.equals("listimage"))) {
        exec = exec.replace(configJsonParentPath.substring(1), "/");
      }
      PrintWriter writer = response.getWriter();
      writer.write(exec);
      writer.flush();
      writer.close();
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}

注意看注释

6、接着，我们需要将ueditor.config.js中的serverUrl配置为我们在第5步的那个controller，如下

7、最后还要在config.json中配置下我们上传的具体细节，下面以图片上传为例

/* 上传图片配置项 */
  "imageActionName": "uploadimage", /* 执行上传图片的action名称（举例：http://localhost:8080/ueditor?action=uploadimage） */
  "imageFieldName": "upfile", /* 提交的图片表单名称 */
  "imageMaxSize": 2048000, /* 上传大小限制，单位B */
  "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
  "imageCompressEnable": true, /* 是否压缩图片,默认是true */
  "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
  "imageInsertAlign": "none", /* 插入的图片浮动方式 */
  /* imageUrlPrefix + imagePathFormat 为当前文件的访问路径 */
  "imageUrlPrefix": "/fileupload/ueditor", /* 图片访问路径前缀 */
  /* imagePathFormat默认以当前config.json所在的目录为根目录 */
  "imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* （注意：默认以当前config.json所在的目录为根目录）上传保存路径,可以自定义保存路径和文件名格式 */
                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                /* {time} 会替换成时间戳 */
                /* {yyyy} 会替换成四位年份 */
                /* {yy} 会替换成两位年份 */
                /* {mm} 会替换成两位月份 */
                /* {dd} 会替换成两位日期 */
                /* {hh} 会替换成两位小时 */
                /* {ii} 会替换成两位分钟 */
                /* {ss} 会替换成两位秒 */
                /* 非法字符 \ : * ? " < > | */
                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

这里我们需要关注重点理解的是 imageUrlPrefix 、imagePathFormat

1) 域名 + imageUrlPrefix + imagePathFormat 为当前文件的访问路径；

2）imageUrlPrefix是图片访问路径前缀，例如：http://localhost:8080/fileupload/ueditor，imageUrlPrefix就是其中的“/fileupload/ueditor”；

3）imagePathFormat是以imageUrlPrefix为根路径的文件存放的具体路径，例如：

http://localhost:8080/fileupload/ueditor/image/20190202/121222.jpg，imagePathFormat就是其中的“/image/20190202/121222.jpg”；

4）剩下其他参数就很明显了。

7、可能会遇到的问题

1、明明配置的文件最大为2048000，但是文件只有1M多点后台报错了？

解决：这是因为默认开启了springboot的上传，在application.properties中 spring.servlet.multipart.enabled=false 就可以了，或者也可以跳下它的默认最大值 spring.servlet.multipart.max-file-size=1MB，具体如下图：

2、明明修改了imagePathFormat，单还是保存在了原始的路径下？

解决：直接将config.json文件放到了我想保存文件的位置即可。

3、在线管理图片无法显示？

解决：在我们上面的UeditorController中其实已经解决了，就是当action=listfile或者action=listimage时将new ActionEnter(request, configJsonParentPath).exec()得到的字符串中的configJsonParentPath路径替换为空字符串即可，如下

最后启动服务，打开http://localhost:8080/ueditor/index.html页面测试，效果如下图：

总结

以上所述是小编给大家介绍的springboot下ueditor上传功能的实现及遇到的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Spring Boot实现文件上传示例代码

使用SpringBoot进行文件上传的方法和SpringMVC差不多,本文单独新建一个最简单的DEMO来说明一下. 主要步骤包括: 1.创建一个springboot项目工程,本例名称(demo-uploadfile). 2.配置 pom.xml 依赖. 3.创建和编写文件上传的 Controller(包含单文件上传和多文件上传). 4.创建和编写文件上传的 HTML 测试页面. 5.文件上传相关限制的配置(可选). 6.运行测试. 项目工程截图如下: 文件代码: <dependencies>
详解SpringBoot文件上传下载和多文件上传（图文）

最近在学习SpringBoot,以下是最近学习整理的实现文件上传下载的Java代码: 1.开发环境: IDEA15+ Maven+JDK1.8 2.新建一个maven工程: 3.工程框架 4.pom.xml文件依赖项 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation
如何解决SpringBoot集成百度UEditor图片上传后直接访问404

SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目. 首先分析一下原因: 我们知道,如果使用类似 /upload/image/1.jpg 这种格式进行图片的访问的时候,SpringBoot读取的并不是本项目中直接的静态目录,而是在进行编译的时候生成target目录下的文件,如下图所示: 那么问题就来了,我们在运行的过程中上传一个图片的话,并不能重新加载当前这个项目
SpringBoot整合UEditor的示例代码

当前开发项目涉及到富文本框,了解了不少富文本编辑器之后,最终决定使用度娘的UEditor.原因:功能强大,并且自带适配java后端的图片和视频上传. 项目地址不多说,上一下该项目的地址: http://ueditor.baidu.com/website/ 简书不支持markdown其他站点的外链很遗憾整合过程后端改造因为项目使用的springboot框架,而UEditor对于java后端的支持仅仅是给了一个jsp文件.因此,需要对该文件进行一下处理,修改为面向springboot的统一c
Spring Boot 文件上传原理解析

首先我们要知道什么是Spring Boot,这里简单说一下,Spring Boot可以看作是一个框架中的框架--->集成了各种框架,像security.jpa.data.cloud等等,它无须关心配置可以快速启动开发,有兴趣可以了解下自动化配置实现原理,本质上是 spring 4.0的条件化配置实现,深抛下注解,就会看到了. 说Spring Boot 文件上传原理其实就是Spring MVC,因为这部分工作是Spring MVC做的而不是Spring Boot,那么,SpringMVC又是怎么
spring MVC + bootstrap实现文件上传示例（带进度条）

最近学习了bootstrap,有结合了spring MVC写了个文件上传的示例,留做笔记,废话不多说,直接上代码监听器类FileUploadProgressListener.Java package com.gpl.web.listener; import javax.servlet.http.HttpSession; import org.apache.commons.fileupload.ProgressListener; import org.springframework.stereo
Spring Boot实现图片上传功能

本文实例为大家分享了Spring Boot图片上传的具体代码,供大家参考,具体内容如下 package com.clou.inteface.domain.web.user; import java.io.File; import java.io.IOException; import java.util.HashMap; import java.util.Map; import org.apache.commons.lang3.StringUtils; import org.springfram
编辑器Ueditor和SpringBoot 的整合方法

1.先导入ueditor所有的包:在springboot static下 2.导入需要的ueditor的js 3.配置ueditor.config.js的// 服务器统一请求接口路径://, serverUrl:(这个路径是个Java类,和config.js的内容相同) 4.js里面执行1.var ue = UE.getEditor('editor');函数 5.上传图片: /* Ueditor里面的上传图片 */ UE.Editor.prototype._bkGetActionUrl=UE.E
解决springboot MultipartFile文件上传遇到的问题

1.ajax传过去的参数在controller接受不到解决:在contoller中增加@RequestParam 例如:saveUploadFile( @RequestParam("file") MultipartFile file,HttpServletRequest request) 2.org.springframework.web.multipart.support.MissingServletRequestPartException: Required request pa
springboot下ueditor上传功能的实现及遇到的问题

前言本文主要写的是:springboot下ueditor上传功能的实现及遇到的一些问题的处理整体项目结构展示 Springboot整合ueditor及上传功能实现的具体步骤 1.下载ueditor-1.4.3.3 这个在官网下载就行,不过貌似utf-8版本的没有资源了,源码版的下了几次都中断了,最终我是从第三方下的 2.新建一个测试页面 ueditor的根目录下有一个index.html,用它就行,源码如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
Java SpringBoot实现文件上传功能的示例代码

测试代码 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org
详解SpringBoot下文件上传与下载的实现

SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传与下载.前端上传采用百度webUploader插件.有关该插件的使用方法还在研究中,日后整理再记录.本文主要介绍SpringBoot后台对文件上传与下载的处理. 单文件上传 / 单文件上传 @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestParam("file") Multipart
springboot+thymeleaf 文件上传功能的实现代码

pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifa
jquery+springboot实现文件上传功能

本文实例为大家分享了jquery+springboot实现文件上传功能的具体代码,供大家参考,具体内容如下前端 <!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-w
Spring MVC环境中文件上传功能的实现方法详解

前言我们在实际开发过程中,尤其是web项目开发,文件上传和下载的需求的功能非常场景,比如说用户头像.商品图片.邮件附件等等.其实文件上传下载的本质都是通过流的形式进行读写操作,而在开发中不同的框架都会对文件上传和下载有或多或少的封装,这里就以Spring MVC环境中文件的上传为例,讲解Spirng MVC环境下的文件上传功能实现.下面话不多说了,来一起看看详细的介绍吧. 一.客户端编程由于多数文件上传都是通过表单形式提交给后台服务器的,因此,要实现文件上传功能,就需要提供一个文件上传的表单
图解Springboot集成七牛云并实现图片上传功能过程

七牛云的使用 1.进入官网,注册一个账号 2.找到对象存储 3.新建存储空间 4.管理存储空间 5.到此基本操作就完成了,接下来我们要在项目中使用方式一:官方的帮助文档,很详细: 步骤一:找到开发者中心步骤二:选择对象存储步骤三:找到Java的SDK 可以看到我们的官网非常详细! 方式二:这里给大家封装好了一个工具类,maven项目可以直接用官网是静态工具类,这里是注入到IOC容器当中! 1.导入pom依赖 <dependency> <groupId>com.qiniu&l
SpringBoot文件上传功能的实现方法

目录 1.应用实例 2.代码实现 3.引出两个问题 1.应用实例需求: 演示 Spring-Boot 通过表单注册用户,并支持上传图片 2.代码实现代码实现-文件上传创建 templates/upload.html , 要求头像只能选择一个, 而宠物可以上传多个图片 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <
java实现文件夹上传功能实例代码(SpringBoot框架)

目录前言一.前端如何设置上传组件并将资源上传到后台服务 1)首先我们需要新建一个用来提交文件夹的form表单 2)然后我们添加自己框架内的一些按钮来触发该隐藏的表单二.后台如何接收处理文件夹表单数据总结前言有时我们后台管理等服务可能会有这样一个简单需求,就是根据文件夹将整个文件夹下的所有资源都上传到我们的服务器上,本人也是搜索了大量资料,最终以最简单便捷的方式实现该功能,具体操作步骤如下一.前端如何设置上传组件并将资源上传到后台服务这里的项目框架为若依VUE版本,下面将核心的代码
springboot带有进度条的上传功能完整实例

本文实例讲述了springboot带有进度条的上传功能.分享给大家供大家参考,具体如下: 一.说明最近要做文件上传,在网上找了很久都没有一个全面的示例,特此记录下来分享给大家. 1.文件上传接口可按照springboot默认实现,也可用commons-fileupload组件,本示例使用springboot默认文件上传 2.最后也有commons-fileupload组件接口示例 2.重点在前端JS实现(也可以使用ajax上传),参考了网上大量上传文件显示进度条博客以及技术方案,在此做了一个统

springboot下ueditor上传功能的实现及遇到的问题

相关推荐

随机推荐