springboot中thymeleaf使用UEditor

最新推荐文章于 2021-06-28 16:46:35 发布

Jdragon-.-

最新推荐文章于 2021-06-28 16:46:35 发布

阅读量315

点赞数

本文链接：https://blog.csdn.net/qq_26212181/article/details/103762958

版权

前

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

image

部署UEditor

使编辑器显示

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

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

image

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

image

这是我放入后的目录。

image.png

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

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

发现使用的是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，读出内容到编辑器中成功。

Jdragon-.-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
springboot中thymeleaf使用UEditor

前在给拖拉机编写社区时需要用到富文本编辑，在这里我先列举部署流程，再写一些我遇到的坑image部署UEditor使编辑器显示直接上UEditor官网下载下载地址将一个完整源码和一个JSP-utf8版下载下来。image打开完整源码的zip，进入/euditor-1.4.3.3/jsp/src/com/baidu，将整个ueditor放入你的项...
复制链接

扫一扫