wangEditor2上传图片

最新推荐文章于 2024-05-22 17:32:05 发布

JavaCode猿

最新推荐文章于 2024-05-22 17:32:05 发布

阅读量2.3k

点赞数

分类专栏：一位小小的人的java web的学习之路文章标签： wangEditor2 上传图片 spring boot thymeleaf Java web

本文链接：https://blog.csdn.net/malimingwq/article/details/79424382

版权

一位小小的人的java web的学习之路专栏收录该内容

28 篇文章 2 订阅

订阅专栏

我用的是myeclipse 2017,spring boot+thymeleaf项目,wangEditor2与wangeditor3的配置方式不同，切记看文档，最下方是官方文档。这是我早期写的博客：ssh使用wangEditor2

一.下载，创建编辑器以及配置

1.1 下载wangEditor2的GitHub网址：

https://github.com/wangfupeng1988/wangEditor/releases，选取版本2的下载。

1.2 选取下载的文件夹中的dist，导入项目中。

1.3 创建编辑器：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" th:href="@{/dist/css/wangEditor.min.css}"></link>

<script type="text/javascript">
function modifyContent() {
var content = document.getElementById("content");
content.value = editor.$txt.html();
}
</script>
</head>
<body>
<form action="@{/admin/addUser}" method="post" οnsubmit="modifyContent()">

<script type="text/javascript" th:src="@{/dist/js/lib/jquery-1.10.2.min.js}"></script>
<script type="text/javascript" th:src="@{/dist/js/wangEditor.min.js}"></script>

<div style="width:500px;height:400px;">
<textarea rows="5" cols="100" name="content" style="display:none;" id="content"></textarea>
<div id="editor" style="width:100%;height:400px;"></div>
<script type="text/javascript">
                var E = window.wangEditor
                  var editor = new E('editor')
                /* 这里是controller中上传图片方法的路径 */
                editor.config.uploadImgUrl = '/admin/uploadImage'
                /* 上传图片的默认名字 */
                editor.config.uploadImgFileName = 'myFileName'
                editor.create()
         </script>
</div>
<input type="submit"/>
</form>
</body>

</html>

1.5 如果你用的thymeleaf，则执行修改功能时，可使用th:utext给创建富文本编辑器的div直接赋值(你添加到数据库中的编辑器内容)

若是使用的其他，如jsp，则可以使用编辑器的设置内容功能：editor.$txt.html('${users.content}')

二.Java 上传图片并回显

2.1 返回结果的数据格式:上传图片的url地址，这和wangEditor3要求的json格式不同。

2.2 根据返回结果写Java上传类，返回图片的url

WangEditorController.java (为了方便，省去了service层，serviceImpl层，dao层)

import java.io.File;
import java.io.IOException;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

@RequestMapping("admin")
@RestController

public class WangEditorController {

//转到wangEditor2的界面
@RequestMapping(value = "/wangEditor2")
public ModelAndView wangEditor2() {
return new ModelAndView("login");//login.html
}
//上传图片并返回图片url，接收的图片名和wangEditor定义的图片名保持一致
@RequestMapping("uploadImage")
public void uploadImage(MultipartFile myFileName, HttpSession session, HttpServletRequest request,
HttpServletResponse response) throws IOException {
String realName = "";
if (myFileName != null) {
String fileName = myFileName.getOriginalFilename();
String fileNameExtension = fileName.substring(fileName.indexOf("."), fileName.length() - 1);
// 生成实际存储的真实文件名
realName = UUID.randomUUID().toString() + fileNameExtension;
String realPath = session.getServletContext().getRealPath("/upload/");
File uploadFile = new File(realPath, realName);
myFileName.transferTo(uploadFile);
}//upload是你保存上传图片的文件夹
response.getWriter().write(request.getContextPath() + "/upload/" + realName);
}
}

2.3 wangEditor2官方文档网址：https://www.kancloud.cn/wangfupeng/wangeditor2

2.4 wangEditor的demo例子：wangEditor在线示例

若是哪里有理解错误的或写错的地方，望各位读者评论或者私信指正，不胜感激。

JavaCode猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
wangEditor2上传图片

我用的是myeclipse 2017,spring boot+thymeleaf项目,wangEditor2与wangeditor3的配置方式不同，切记看文档，最下方是官方文档。这是我早期写的博客：ssh使用wangEditor2一.下载，创建编辑器以及配置1.1 下载wangEditor2的GitHub网址：https://github.com/wangfupeng1988/wangEditor...
复制链接

扫一扫