springboot+ueditor+前后端分离

最新推荐文章于 2025-05-12 14:08:17 发布

YanfangDu

最新推荐文章于 2025-05-12 14:08:17 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： java

本文链接：https://blog.youkuaiyun.com/dfyBlog/article/details/89209440

springboot+ueditor+前后端分离

简介

项目采用前后端分离,故通过jsp+java的方式实现UEditor的集成

1. 官网下载ueditor资源,完整版

https://ueditor.baidu.com/website/download.html

2. 把相应文件拷贝到前端项目(net,php,jsp文件夹这里用不到)

前端目录结构

3. 把jsp下面的源码,以及config.json文件拷贝到后台项目

后台目录

4. 修改前台配置

4.1 页面

<script type="text/javascript" src="lib/config.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/ueditor/1.4.3/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>

<div class="formControls col-xs-8">
    <input name="text" id="text" value="" type="hidden"/>
     <script id="editor" type="text/plain"></script>
</div>

初始化

<script>
   var content = "";
   var editor;
   UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
   UE.Editor.prototype.getActionUrl = function(action) {
   	//只有在自己写后台代码实现的时候才需要这一块儿
       if (action == 'uploadimage' /*|| action == 'uploadscrawl'*/ ) {
           return domainDb + "operate-db/ueditor/uploadimage";
       } else {
           return this._bkGetActionUrl.call(this, action);
       }
   }
   $(function () {
       $("input[name='operator']").val(userName);
       editor = UE.getEditor('editor');    //获取富文本
       //初始化编辑器 （该处用于设置编辑器回显值）
       editor.ready(function () {
           editor.setContent(content);
       });
   })
   </script>

4.2 config.js路径配置

//UEditor图片上传用到
var domainPage = "http://localhost:63342/operate-page/";
var domainDb = "http://localhost:8081/";

4.3 修改ueditor.config.js

在这里插入图片描述

4.4 修改ueditor.all.js

//设置图片最大宽度,以免撑出滚动条
 'img{max-width:100%;}' +

在这里插入图片描述

5. 修改后台配置

5.1 配置application-dev.yml中路径

systemconfig:
##服务器路径
#static_server_path: /usr/local/operate/static
#static_server_domain: http://118.126.142.184:8080/static
#config_json_path: /usr/local/tomcat-1/webapps/operate-db/WEB-INF/classes/config.json
##本地路径
##上传路径
static_server_path: D:\java\apache-tomcat-7.0.91\webapps\tenxSteel4\pages\static
##读取路径
static_server_domain: http://localhost:8085/tenxSteel4/pages/static
config_json_path: src/main/resources/config.json

5.2 SystemConfig工具类读取dev配置文件中的路径

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import tenx.operate.common.util.StringUtils;

import java.util.ResourceBundle;

@Configuration
public class SystemConfig {
   // 抽数据URL
  	public static String URL;
   /**
   * 数据库名称
   */
   public static String STATIC_SEVER_PATH;
   public static String STATIC_SEVER_DOMAIN;
   public static String CONFIG_JSON_PATH;
   @Value("${systemconfig.static_server_path}")
   public void setStaticServerPath(String staticServerPath) {
       SystemConfig.STATIC_SEVER_PATH = staticServerPath;
   }

   @Value("${systemconfig.config_json_path}")
   public void setConfigJsonPath(String configJsonPath) { SystemConfig.CONFIG_JSON_PATH = configJsonPath;
   }

   @Value("${systemconfig.static_server_domain}")
   public void setStaticSeverDomain(String staticServerDomain) { SystemConfig.STATIC_SEVER_DOMAIN = staticServerDomain;
   }

   /**
    * 转换静态资源路径
    * @param path
    * @return
    */
   public static String convertToUrl(String path){

       if(StringUtils.isNullOrEmpty(path)){
           return path;
       }
       return path.replaceAll("fs:",STATIC_SEVER_DOMAIN);
   }

   public static String convertToFile(String path){

       if(StringUtils.isNullOrEmpty(path)){
           return path;
       }
       return path.replaceAll("fs:",STATIC_SEVER_PATH);
   }
}

5.3 修改ConfigManager

修改rootPath为dev中配置的图片上传路径
originalPath为dev中配置的config.json所在的路径
注:Linux为/usr/local/tomcat-1/webapps/operate-db/WEB-INF/classes/config.json
本地环境为:src/main/resources/config.json

5.4 修改BinaryUploader中的save方法

如果不做修改的话上传会报错(未找到上传数据)
原因:SpringMVC框架对含字节流的request进行了处理，此处传的是处理过的request，故获取不到字节流。
故修改原有代码,采用SpringMVC框架的解析器multipartResolver

public static final State save(HttpServletRequest request, Map<String, Object> conf) {
	// FileItemStream fileStream = null;
	// boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;

	if (!ServletFileUpload.isMultipartContent(request)) {
		return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
	}

	// ServletFileUpload upload = new ServletFileUpload(
	// 	new DiskFileItemFactory());
	//
	// if ( isAjaxUpload ) {
	//     upload.setHeaderEncoding( "UTF-8" );
	// }

	try {
		// FileItemIterator iterator = upload.getItemIterator(request);
		//
		// while (iterator.hasNext()) {
		// 	fileStream = iterator.next();
		//
		// 	if (!fileStream.isFormField())
		// 		break;
		// 	fileStream = null;
		// }
		//
		// if (fileStream == null) {
		// 	return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
		// }
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
		if(multipartFile==null){
			return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
		}

		String savePath = (String) conf.get("savePath");
		//String originFileName = fileStream.getName();
		String originFileName = multipartFile.getOriginalFilename();
		String suffix = FileType.getSuffixByFilename(originFileName);

		originFileName = originFileName.substring(0,
				originFileName.length() - suffix.length());
		savePath = savePath + suffix;

		long maxSize = ((Long) conf.get("maxSize")).longValue();

		if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
			return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
		}

		savePath = PathFormat.parse(savePath, originFileName);

		String physicalPath = (String) conf.get("rootPath") + savePath;

		//InputStream is = fileStream.openStream();
		InputStream is = multipartFile.getInputStream();
		State storageState = StorageManager.saveFileByInputStream(is,
				physicalPath, maxSize);
		is.close();

		if (storageState.isSuccess()) {
			storageState.putInfo("url", PathFormat.format(savePath));
			storageState.putInfo("type", suffix);
			storageState.putInfo("original", originFileName + suffix);
		}

		return storageState;
		// } catch (FileUploadException e) {
		// 	return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);
	} catch (IOException e) {
	}
	return new BaseState(false, AppInfo.IO_ERROR);
}

5.5 修改config.json

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
   /*服务器路径:http://118.126.142.184:8080/static*/
   /*本地路径:http://localhost:8085/tenxSteel4/pages/static*/
   /* 上传图片配置项 */
   "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
   "imageFieldName": "upfile", /* 提交的图片表单名称 */
   "imageMaxSize": 2048000, /* 上传大小限制，单位B */
   "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
   "imageCompressEnable": true, /* 是否压缩图片,默认是true */
   "imageCompressBorder": 600, /* 图片压缩最长边限制 */
   "imageInsertAlign": "none", /* 插入的图片浮动方式 */
   "imageUrlPrefix": "http://localhost:8085/tenxSteel4/pages/static", /* 图片访问路径前缀 */
   "imagePathFormat": "/attachment/image/{yyyy}/{mm}/{dd}/{hh}/{ii}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
   /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
   /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
   /* {time} 会替换成时间戳 */
   /* {yyyy} 会替换成四位年份 */
   /* {yy} 会替换成两位年份 */
   /* {mm} 会替换成两位月份 */
   /* {dd} 会替换成两位日期 */
   /* {hh} 会替换成两位小时 */
   /* {ii} 会替换成两位分钟 */
   /* {ss} 会替换成两位秒 */
   /* 非法字符 \ : * ? " < > | */
   /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

   /* 涂鸦图片上传配置项 */
   "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
   "scrawlFieldName": "upfile", /* 提交的图片表单名称 */
   "scrawlPathFormat": "/attachment/image/{yyyy}/{mm}/{dd}/

最低0.47元/天解锁文章