springboot + wangEditor富文本整合成功

最新推荐文章于 2024-08-07 15:32:26 发布

八月大哥

最新推荐文章于 2024-08-07 15:32:26 发布

阅读量1.3k

点赞数

分类专栏： springboot wangEditor

本文链接：https://blog.csdn.net/qq_41784817/article/details/102534241

版权

springboot 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

wangEditor

1 篇文章 0 订阅

订阅专栏

最近在做新闻系统，对处理新闻内容需要用到富文本来完成，之前用传统的ssm框架，记得配置百度ueditor比较简单，现在习惯用springboot,目录结构跟以前的结构不一样，找不到config.json文件，百度上很多处理这个问题的方法，改源码或者新建一个类来寻找配置文件，一看要配置很多地方，果断放弃使用ueditor,后面找了一些好用的富文本，后面选择了wangEditor富文本，需要写的东西比较少，分享给大家看一下。

目录结构是这样

wangEditor.min.js 可以去wangEditor官网去下载，下载一整个文件，只需要copy这一个就可以，

pom.xml 添加依赖

<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-freemarker</artifactId>
		</dependency>

我是用freemarker模板引擎，wangEditor.ftl代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }

        .text {
            border: 1px solid #ccc;
            height: 400px;
        }
</style>
</head>
<body>
<div id="div1" class="toolbar"></div>
<div style="padding: 5px 0; color: #ccc">请在下方编辑区输入文章文章内容</div>
<div id="div2" class="text">
    <!--可使用 min-height 实现编辑区域自动增加高度-->
</div>

<!-- 修改.js目录位置 -->
<script type="text/javascript" src="/js/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象，class 选择器
    // editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
    // 配置服务器端地址
    editor.customConfig.uploadImgServer = '/test/upload'
    // 将图片大小限制为 3M
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    // 自定义上传参数
    editor.customConfig.uploadFileName = 'file'
    editor.customConfig.uploadImgHooks = {
        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert : function(insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url = result.url
            insertImg(url)
        }
    }
    // 必须放到有关于编辑器设置前面
    editor.create()

</script>
</body>
</html>

访问页面WangEditorController.java

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class WangEditorController {
		
		@RequestMapping("/wangEditor")
		public String wangEditor() {
			return "wangEditor";
		}
}

返回图片类ImgInfo.java

import java.util.Arrays;

public class ImgInfo {
	private Integer error;
	private String[] url;

	public Integer getError() {
		return error;
	}

	public void setError(Integer error) {
		this.error = error;
	}

	public String[] getUrl() {
		return url;
	}

	public void setUrl(String[] url) {
		this.url = url;
	}

	@Override
	public String toString() {
		return "ImgInfo [error=" + error + ", url=" + Arrays.toString(url) + "]";
	}

}

上传图片UploadImageController.java

import java.io.File;
import java.io.FileOutputStream;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.syf.wang.po.ImgInfo;

@RestController
public class UploadImageController {
	@RequestMapping("/test/upload")
	@ResponseBody
	public ImgInfo setImgUrl(MultipartFile file, HttpServletResponse response, HttpServletRequest request)
			throws Exception {
		// Get the file and save it somewhere
		byte[] bytes = file.getBytes();
//        System.out.println(new String(bytes));
		String path = request.getServletContext().getRealPath("/image/");
		File imgFile = new File(path);
		if (!imgFile.exists()) {
			imgFile.mkdirs();
		}
		String fileName = file.getOriginalFilename();// 文件名称
		System.out.println(path + fileName);

		try (FileOutputStream fos = new FileOutputStream(new File(path + fileName))) {
			int len = 0;
			fos.write(bytes);
		} catch (Exception e) {
			e.printStackTrace();
		}

		String value = "http://localhost:8080/image/" + fileName;
		String[] values = { value };

		ImgInfo imgInfo = new ImgInfo();
		imgInfo.setError(0);
		imgInfo.setUrl(values);

		System.out.println(imgInfo.toString());
		return imgInfo;
	}

}