springboot中thymeleaf使用UEditor

springboot中thymeleaf使用UEditor

在给拖拉机编写社区时需要用到富文本编辑,在这里我先列举部署流程,再写一些我遇到的坑

部署UEditor

使编辑器显示

直接上UEditor官网下载下载地址

将一个完整源码和一个JSP-utf8版下载下来。

打开完整源码的zip,进入/euditor-1.4.3.3/jsp/src/com/baidu,将整个ueditor放入你的项目编码中。

这是我放入后的目录。

image.png

查看index中的demo,将index.html看了一遍,发现需要将js的引用改成绝对路径。然后使用UE.getEditor('编辑器的id'),就可以创建指定id的编辑器。

image.png

image.png

下面就是使textarea创建一个编辑器。

<script>
	contentEditor = UE.getEditor('content');
</script>
<body>
	<textarea name="content" id="content" style="width:95%;height:300px;"></textarea>
</body>

编辑器上传图片后台设置

当做到这一步的时候,使用编辑器上传的时候会被提示后台配置错误。这个时候我们需要看一下刚刚从源码拉下来的配置项文件。

有一个Jsp的配置,但是我们是springboot项目,无法使用这个jsp进行配置。

image.png

需要设置一个控制器,我这里设置了一个UEditorConfig,并且根据这个controller.jsp写一个控制器,如下。

@RestController
@RequestMapping
public class UEditorConfig {
    @RequestMapping("/UEditorConfig")
    @ResponseBody
    public void EDitorConfig(HttpServletRequest request, HttpServletResponse response){
        response.setContentType("application/json");
        String rootPath = this.getClass().getResource("/").getPath();
        try{
            String exec = new ActionEnter(request,rootPath).exec();
            System.out.println(exec);
            PrintWriter printWriter = response.getWriter();
            printWriter.write(exec);
            printWriter.flush();
            printWriter.close();
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}

这个时候运行程序,访问发现上传图片时会提示配置文件方式失败,然后我们进入ActionEnter分析一下。

image.png

发现是从resourse路径读取配置文件。这里我注释了下面会讲,这个在idea中运行是没错的,注释是在我发布到linux服务器的时候踩到的坑。大家可以先在调试中先运行起来。

image.png

所以我们现在知道是什么原因了,读取config.json的时候获取不到文件,将jsp下的config.json移动到resourse。

image.png

这下就可以读取到了。

根据源码读到,使用action参数访问配置控制器能看到配置内容,测试一下是否读取的到配置文件。

http://127.0.0.1:8081/UEditorConfig?action=config

读取成功。

image.png

这次我们要访问一下,这次没有报读取配置错误,而是在上传失败。

我们看一下config.json里的内容, image.png

原来是不知道上传到哪里,这里增加一个basePath,作为上传的系统盘绝对路径

我们看一下上传图片的源码,也是使用action参数上传的图片。进入方法查看

image.png image.png

发现使用的是BinaryUploder里的save方法出错,使用的是FileStream,我们这里用springboot使用MultipartHttpServletRequest来接收图片,再将basePath添加到上传路径之前,(在这里也可以更改rootPath参数)整个源码更改过程贴在下面。

public class BinaryUploader {

	public static final State save(HttpServletRequest request,
			Map<String, Object> conf) {
//		aFileItemStream fileStream = null;
//		boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;

		if (!ServletFileUpload.isMultipartContent(request)) {
			return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
		}

//		ServletFileUpload upload = new ServletFileUpload(
//				new DiskFileItemFactory());
//
//        if ( isAjaxUpload ) {
//            upload.setHeaderEncoding( "UTF-8" );
//        }

		try {
//			FileItemIterator iterator = upload.getItemIterator(request);
//
//			while (iterator.hasNext()) {
//				fileStream = iterator.next();
//
//				if (!fileStream.isFormField())
//					break;
//				fileStream = null;
//			}
//
//			if (fileStream == null) {
//				return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
//			}
				MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
				MultipartFile multipartFile = multipartHttpServletRequest.getFile(conf.get("fieldName").toString());
			if(multipartFile==null){
				return new BaseState(false,AppInfo.NOTFOUND_UPLOAD_DATA);
			}

			String savePath = (String) conf.get("savePath");
//			String originFileName = fileStream.getName();
			String originFileName = multipartFile.getOriginalFilename();
			String suffix = FileType.getSuffixByFilename(originFileName);

			originFileName = originFileName.substring(0,
					originFileName.length() - suffix.length());
			savePath = savePath + suffix;

			long maxSize = ((Long) conf.get("maxSize")).longValue();

			if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
				return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
			}

			savePath = PathFormat.parse(savePath, originFileName);
			String basePath = (String)conf.get("basePath");
//			String physicalPath = (String) conf.get("rootPath") + savePath;
				String physicalPath = basePath + savePath;
//			InputStream is = fileStream.openStream();
				InputStream is = multipartFile.getInputStream();
			State storageState = StorageManager.saveFileByInputStream(is,
					physicalPath, maxSize);
			is.close();

			if (storageState.isSuccess()) {
				storageState.putInfo("url", PathFormat.format(savePath));
				storageState.putInfo("type", suffix);
				storageState.putInfo("original", originFileName + suffix);
			}

			return storageState;
//		} catch (FileUploadException e) {
//			return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);
		} catch (IOException e) {
		}
		return new BaseState(false, AppInfo.IO_ERROR);
	}

	private static boolean validType(String type, String[] allowTypes) {
		List<String> list = Arrays.asList(allowTypes);

		return list.contains(type);
	}
}

配置完之后,别忘记了将springboot创建虚路径与磁盘路径映射。

到此,重新启动,就能收到图片的上传和回显了。

打包后上传Linux图片无法回显

在获取config.json时,是需要获取springboot的resourse路径,打包后获取不了项目的启动路径,是springboot内路径,需要更改为绝对路径,如下图。区分调试时路径和打包后在linux上的路径。

图片.png

读取后数据库回显到编辑器中

我使用setContent方法的时候,设置失败了。后来使用了jquery来更改textarea的内容再初始化UEditor,读出内容到编辑器中成功。

# Spring  java 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×