百度编辑器ueditor与springmvc项目整合

ueditor提供的官方示例没有spring版本的,直接按照jsp版的后台使用问题多多。
后台配置文件config.json的路径可以与其他配置文件放在一起,即src/main/resources目录下。
前台配置文件ueditor.config.js中的路径修改为serverUrl : "/upload/dispatch"
再新建UploadController.java,代码如下:

@Controller
@RequestMapping("/upload")
public class UploadController {
    @Autowired
    private AttachmentService attachmentService;
    @RequestMapping("/dispatch")
    public void config(HttpServletRequest request, HttpServletResponse response, String action) {
        System.out.println("upload request:  " + action);
        response.setContentType("application/json");
        try {
            String exec = ActionEnter.getInstance(request, action).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException | JSONException e) {
            e.printStackTrace();
        }

    }
}

由于后台的文件上传路径在项目启动以后不会再修改,我将ConfigManager修改成单例模式ConfigManager.java中修改的关键代码如下:

private static ConfigManager instance;


public static ConfigManager getInstance(String rootPath, String contextPath, String uri) {

        try {
            if (instance == null)
                instance = new ConfigManager(rootPath, contextPath, uri);
            return instance;
        } catch (Exception e) {
            return null;
        }

    }

public static ConfigManager getInstance(){
        return instance;
    }

相应的,ActionEnter的初始化也要修改。

private ConfigManager configManager = null;

private ActionEnter(HttpServletRequest request) {

        this.request = request;
        this.rootPath = request.getSession().getServletContext().getRealPath("/");
        this.actionType = request.getParameter("action");
        this.contextPath = request.getContextPath();
        this.configManager = ConfigManager.getInstance(this.rootPath, this.contextPath,
                request.getRequestURI().replace(request.getContextPath(), ""));

    }

private ActionEnter(HttpServletRequest request, ConfigManager configManager) {
        this.request = request;
        this.actionType = request.getParameter("action");
        this.contextPath = request.getContextPath();
        this.configManager = configManager;
    }

public static ActionEnter getInstance(HttpServletRequest request,String action) {
        try {
            ConfigManager configManager = ConfigManager.getInstance();
            if (configManager == null||action.equals("config")) {
                return new ActionEnter(request);
            } else {
                return new ActionEnter(request, configManager);
            }
        } catch (Exception e) {
            // TODO: handle exception
            return null;
        }
    }

我做这些修改主要是为了让不是在ueditor中上传的文件也能调用同样的后台,并按照统一的方式存储。

例如使用fineuploader上传图片,请求地址为:

request : {
            endpoint : '<c:url value="/upload/thumb?action=uploadimage"/>'
        },

在UploadController.java中即可与ueditor的调用方式相同。

如果遇到上传文件失败的问题,参考jamesMuWB的修改
重写BinaryUploader.java中的save方法。我在jamesMuWB的基础上修改了部分代码,是为了分离上传的路径和预览图片的路径。因为我的项目是把文件存储在iis服务器上的。

public static final State save(HttpServletRequest request, Map<String, Object> conf) {

        try {
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());

            String savePath = (String) conf.get("savePath");
            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 physicsPath = (String) conf.get("localPath") + savePath;
            State storageState = StorageManager.saveFileByInputStream(multipartFile.getInputStream(), physicsPath,
                    maxSize);
            String iisPath = (String) conf.get("iisUrl") + savePath;
            if (storageState.isSuccess()) {
                storageState.putInfo("url", PathFormat.format(iisPath));
                storageState.putInfo("type", suffix);
                storageState.putInfo("original", originFileName + suffix);
            }
            System.out.println(storageState.toJSONString());
            return storageState;

        } catch (Exception e) {
            e.printStackTrace();
            System.out.println(e.getMessage());
        }
        return new BaseState(false, AppInfo.IO_ERROR);
    }

相应的config.json也要修改:

 /* 上传图片配置项 */
    "iisUrl":"http://192.168.1.103:8082",
    "localPath":"E:/upload",
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制,单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

最后一个问题是在ueditor切换源码或者上传以后再次查看,内容就变了,这其实并不是一个bug,只是从某个版本开始xss过滤默认开启了,只用修改配置即可。

    xssFilterRules : false
    // input xss过滤
    ,
    inputXssFilter : false
    // output xss过滤
    ,
    outputXssFilter : false
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值