wangEditor3上传图片

最新推荐文章于 2024-09-19 11:11:18 发布

JavaCode猿

最新推荐文章于 2024-09-19 11:11:18 发布

阅读量1.7w

点赞数 3

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

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

版权

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

28 篇文章 2 订阅

订阅专栏

我用的是myeclipse 2017,spring boot+thymeleaf项目,wangEditor3与wangeditor2的配置方式不同，切记看文档，最下方是官方文档。

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

1.1 下载wangEditor3的GitHub网址：

https://github.com/wangfupeng1988/wangEditor/releases

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

1.3 让编辑器支持全屏功能的准备：下载全屏插件的GitHub网址：https://github.com/chris-peng/wangEditor-fullscreen-plugin。把wangEditor-fullscreen-plugin.css和wangEditor-fullscreen-plugin.js两个文件下载下来，再下载jquery-3.2.1.min.js，都放入release文件夹（想放哪里放哪里，引入时路径保证正确就可以）。

1.4 创建编辑器：

进入release文件夹下找到wangEditor.js或者wangEditor.min.js，引入任意一个。例子：

<!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="@{/release/wangEditor-fullscreen-plugin.css}"></link>

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

<textarea rows="5" cols="35" name="usIntroduce" style="display:none;" id="introduce"></textarea>
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>

<script type="text/javascript" th:src="@{/release/wangEditor.min.js}"></script>

<script type="text/javascript" th:src="@{/release/jquery-3.2.1.min.js}"></script>
<script type="text/javascript" th:src="@{/release/wangEditor-fullscreen-plugin.js}"></script>
    <script type="text/javascript">
    var E = window.wangEditor
      var editor = new E('#editor')
    /* 处理上传图片的controller路径 */
     editor.customConfig.uploadImgServer = '/admin/uploadImg'
     /* 定义上传图片的默认名字 */
     editor.customConfig.uploadFileName = 'myFileName'
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.create()
    //初始化全屏插件
    E.fullscreen.init('#editor');
    </script>
</div>
<input type="submit"></input>
</form>
</body>

</html>

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

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

二.Java 上传图片并回显

2.1 返回结果的数据格式

这是官方文档给我们的数据格式，是json格式，实际使用忽略注释(//以及//后的内容)

{
// errno 即错误代码，0 表示没有错误。
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,
// data 是一个数组，返回若干图片的线上地址
"data": [
"图片1地址",
"图片2地址",
"……"
]

}

2.2 根据返回结果制定返回数据类 Result.java(省略无参和有参构造方法以及getter,setter方法)

import java.io.Serializable;
public class Result<T> implements Serializable {
/** 错误码. */
private Integer errno;
/** 具体的内容. */
private String [] data;
}

2.3 处理返回结果类 ResultUtil.java(只有成功获得数据的处理方法，如需要其他方法自行添加)

import java.util.List;
public class ResultUtil {
public static Result success(String []object) {
Result result = new Result();
result.setErrno(0);
result.setData(object);
return result;
}
public static Result success() {
return success(null);
}

}

2.4 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.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 {
//转到wangEditor3的界面
@RequestMapping(value = "/wangEditor3")
public ModelAndView wangEditor(){
return new ModelAndView("index");//index.html
}
//上传图片并返回图片路径(json格式)，接收的图片名和wangEditor定义的图片名保持一致
@RequestMapping("uploadImg")
public Result uploadImg(MultipartFile myFileName,HttpSession session,HttpServletRequest request) throws IllegalStateException, IOException{
String realName = "";
if (myFileName != null) {
String fileName = myFileName.getOriginalFilename();
String fileNameExtension = fileName.substring(fileName.indexOf("."), fileName.length() - 1);
// 生成实际存储的真实文件名

realName = UUID.randomUUID().toString() + fileNameExtension;

// "/upload"是你自己定义的上传目录

String realPath = session.getServletContext().getRealPath("/upload");
File uploadFile = new File(realPath, realName);
myFileName.transferTo(uploadFile);
}
String [] str = {request.getContextPath() + "/upload/" + realName};
return ResultUtil.success(str);
}

}

2.5 Java对象转json串

我的项目是spring boot项目，由@RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用，@ResponseBody将Java对象转为json串，但是有些初学者用的还是普通Java项目等没有这些自动转换的功能，所以这里是解决方法

(1)maven项目在pom.xml中添加

</dependency>

(2)普通Java项目自行下载 json-lib-2.4.jar 导入项目并Build Path

(3)使用方法，如上文

Result result = ResultUtil.success(str);

JSONObject object =JSONObject.fromObject(result );

response.getWriter().write(object .toString());需要用到HttpServletResponse response

2.6 wangEditor3官方文档网址：https://www.kancloud.cn/wangfupeng/wangeditor3

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