第三方插件的引用(1) : SSM,springboot 引入ueditor及图片上传阿里云OS和展示

最新推荐文章于 2024-10-28 22:13:21 发布

Lxinccode

最新推荐文章于 2024-10-28 22:13:21 发布

阅读量1k

点赞数 1

分类专栏：中间件文章标签： ssm springboot ueditor 阿里云 OSS

本文链接：https://blog.csdn.net/Lxinccode/article/details/79672379

版权

中间件专栏收录该内容

32 篇文章 1 订阅

订阅专栏

前言: SSM和springboot 引入ueditor, 由于ueditor的图片都上传在项目里,所以后面有将内容中的图片上传至阿里云服务器并删除项目中的图片及把内容中的图片路径替换成网络路径代码;

1. 普通版

Controller

@RequestMapping("/i1")
	public String index1() {
		return "index";
	}
	
	
	@RequestMapping("/demo1")
	@ResponseBody
	public String demo1(String content) {
		return "1"+content;
	}

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ueditor-demo</title>
</head>
<body>
	<form id="upload" method="post" action="/demo1"
		enctype="multipart/form-data" οnclick="SetValue()">

		<div>
			<!-- 这里可设置宽度,下面js设置高度 -->
			<script id="editor" type="text/plain" style="width: 1000px;"></script>
		</div>

		<!-- 该隐藏文本域就是传至后台专用的 -->
		<textarea style="display: none;" id="infomationContent" name="content"></textarea>
		<br> <input type="submit" value="提交">
	</form>
</body>
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath}/ejs/jquery-1.11.3.min.js"></script>

<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath}/ueditor/ueditor.config.js">
	
</script>

<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath}/ueditor/ueditor.all.js">
	
</script>
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>


<script type="text/javascript">
	var ue = UE.getEditor('editor');
	//UE.getEditor('aaa', { initialFrameWidth: null });
	$(document).ready(function() {
		var value = $("#infomationContent").val();
		ue.addListener("ready", function() { // editor准备好之后才可以使用
			ue.setContent(value);
		});
	});

	ue.ready(function() {
		ue.setHeight(400);
		//设置编辑器的内容
		// ue.setContent('hello');
		// //获取html内容，返回: <p>hello</p>
		// var html = ue.getContent();
		// //获取纯文本内容，返回: hello
		// var txt = ue.getContentTxt();
	});

	function SetValue() {
		var value = UE.getEditor('editor').getContent();
		console.log(value);
		$("#infomationContent").val(value);
	};
</script>

</html>

2. 阿里云OSS版

Controller

/**
	 * 将内容中的图片上传至阿里云服务器并删除项目中的图片及把内容中的图片路径替换成网络路径
	 * @param multipartFile
	 * @param content
	 * @param request
	 * @return
	 */
	@RequestMapping("/demo1")
	@ResponseBody
	public String demo1(@RequestParam(value = "file", required = false) MultipartFile[] multipartFile,
			String content, HttpServletRequest request) {
		if (content.indexOf("img src=\"") != -1) {
			String[] strings = content.split("img src=\"");
			for (String string2 : strings) {
				if (string2.indexOf("\" title=\"") != -1) {
					String s3 = string2.split("\" title")[0];
					String realPath = request.getRealPath(s3);
					String endPath = realPath.replace("\\", "\\\\");
					File f2 = new File(endPath);
					// 上传阿里云
					String key = "news_images" + s3.split("image")[1];
					if (!f2.exists()) {
						continue;
					}
					String url = OssClientUtil.uploadPicLongTime(f2, key);
					// 删除图片
					f2.delete();
					content = content.replaceAll(s3, url);
				} else {
					continue;
				}
			}
		}
		return content;
	}