Spring Boot使用UEditor

1、将ueditor放入静态资源

注意图中红色剪头为重要配置，

其中的controller.jsp是后台统一入口（获取config.json和上传文件等），由于被放入了静态资源，无法正常访问和执行，所以需要我们自己写方法覆盖掉它，

config.json在前端ue首次加载时会请求获取，里面都是一些关于上传文件和回显的配置，由于我们决定覆盖掉controller.jsp中的方法，所以config.json中关于上传的配置可以忽略，不需要修改它

只需要修改ueditor.config.js

2、添加依赖

<dependency>
    <groupId>com.gitee.qdbp.thirdparty</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.4.3.3</version>
</dependency>

解释：原依赖在 ueditor/jsp/lib中，现已有人放入maven仓库中，直接放入pom即可

3、修改配置

a.修改ueditor.config.js，

大约在33行，这里填写成我们自己的上传文件接口，意思是现在关于ueditor后台的处理全部交由接口:/ueditor/config来实现

还有其他例如工具栏的一些配置，参考官网api

4、覆盖原上传方法

@Controller
public class CommonController {

//	 private static final Logger log = LoggerFactory.getLogger(CommonController.class);

	/**
	 * 文件上传路径
	 */
	public static final String UPLOAD_PATH = "/profile/upload/";

	@Autowired
	private ServerConfig serverConfig;
    
        //现在关于ueditor的后台接口统统走这里,当然这里不光是这两个动作,还有其他操作可自行扩展
	@RequestMapping("/ueditor/config")
	public String config(String action,HttpServletRequest request,HttpServletResponse response) {
        System.out.println(action);
        if("config".equals(action)) {
        	return "redirect:/admin/plugins/ueditor/jsp/config.json";
        }else {
        	return "forward:/common/upload";
        }
    }

	/**
	 * 通用上传请求，注意返回数据，一定要这样写，这是ue需要的格式，保证回显
     * 文件参数必须是upfile，这是config.json中定义的
	 */
	@PostMapping("/common/upload")
	@ResponseBody
	public Map<String, Object> uploadFile(MultipartFile upfile) throws Exception {
		Map<String, Object> map = new HashMap<>(3);
		try {
			// 上传文件路径
			String filePath = WebConst.DEFAULT_UPLOAD_BASEDIR;
			// 这是我们的上传通用方法，上传到我们本地文件系统
			String fileName = FileUploadUtils.upload(filePath, upfile);
            //文件上传成功后一定要给一个访问路径，用于回显
			String url = serverConfig.getUrl() + UPLOAD_PATH + fileName;
			map.put("url", url);
            map.put("state", "SUCCESS");
            map.put("original", "");
		} catch (Exception e) {
			map.put("url", "");
            map.put("state", "SUCCESS");
            map.put("original", "");
		}
		
		return map;
	}
}

解释：rest接口：/ueditor/config，即上一步配置的后台链接，从代码可知，前端ue插件获取配置（前端ue初始化时会通过这个链接获取config.json）和上传文件都是走的这里(通过action参数判断是获取参数还是上传文件)，

当然还有其他许多动作,请参考文章:https://blog.csdn.net/taian1665/article/details/77859837

注意！！这时候config.json中的各种**ActionName和**UrlPrefix等配置失去了作用！！！因为这部分后台逻辑被我们自己重写了,所以需要注意一下返回值,各种action的入参和返回值等信息请参考上方提供的链接

自定义上传的好处是可以自己处理文件，比如放在其他系统目录或者各种dfs系统，ue默认是放在当前项目路径不保险

4、成功

视频和图片都能正常上传和回显~~

5、备注一下小的使用技巧，比如自动截取文章前几百个字作为简介：

var ue = UE.getEditor('text',{
    initialFrameWidth:"100%",   //初始化宽度
    initialFrameHeight:400,     //初始化高度
});

//同步更新简介，富文本变化，简介跟着变化，展示效果会好些
ue.addListener('contentChange',function(editor){
    //相关操作
    var text = ue.getContentTxt();
    if(text.length>200){
        text = text.substring(0,200);
    }
    $("#remark").val(text);
});

6、内容渲染

比如代码格式，ueditor是有自己的格式的，所以需要使用ueditor对上面保存的富文本信息进行渲染后才能正常显示，不然以默认的html进行展示而没有相应的css样式会出现排版问题。

在需要内容展示的地方使用js代码进行渲染

<!--需要渲染的html片段-->
<div class='ueparse'><p th:utext="${article.content}"></p></div>


<!--在这里引入渲染用的js-->
<script th:src="@{/admin/plugins/ueditor/ueditor.parse.min.js}" ></script>
<!--对相应的html片段进行富文本渲染-->
<script type="text/javascript">
	$(function(){
		uParse('.ueparse', {
			rootPath : "/admin/plugins/ueditor/"
		});
	});
</script>