关于百度富文本编辑器的开发注意点

最新推荐文章于 2025-03-26 14:27:14 发布

原创最新推荐文章于 2025-03-26 14:27:14 发布 · 490 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在使用UEditor时实现图片上传路径的自定义配置。通过重写图片上传方法，可根据不同项目的需要灵活调整图片的存储位置，提高系统的复用性和扩展性。

1.开始在项目时，有个功能发送系统公告。用到了百度的Ueditor。

2.开始项目只有一个固定的访问网址和存储路径是比较方便，但是后来由于项目用的地方多了，存储的路径不再局限需要和其他项目共享等一些情况。这个时候需要上传的路径和访问可控
3.这个时候，重写了图片上传的方法在jsp里面加入以下代码，路径里的路径可以识别
<script type="text/javascript">
UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl=function(action){
    if (action == 'uploadimage'){
        return "${basePath}/page/ueditor/myuploadimage";    /* 这里填上你自己的上传图片的action */
    }else{
        return this._bkGetActionUrl.call(this, action);
    }
 };
</script>

4.后台代码

@RequestMapping(value = "/myuploadimage", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public Map<String,Object> save(HttpServletRequest req,@RequestAttribute(CONST.COMMON.USERINFO)UserInfo userinfo){
		log.info("=================开始上传ueditor图片==================");
        Map<String,Object> rs = new HashMap<String, Object>();
        MultipartHttpServletRequest mReq  =  null;
        MultipartFile file = null;
//        InputStream is = null ;
        String fileName = "";
        // 原始文件名   UEDITOR创建页面元素时的alt和title属性
        String originalFileName = "";
        String filePath = "";
        try {
            mReq = (MultipartHttpServletRequest)req;
            // 从config.json中取得上传文件的ID
            file = mReq.getFile("upfile");
            // 取得文件的原始文件名称
            fileName = file.getOriginalFilename();
            originalFileName = fileName;
            /*你的处理图片的代码*/
            String data = Base64.encodeBase64String(file.getBytes());
            Doclistinfo docinfo = ueditorService.ueditorUpimg(data, userinfo, false, rs);
            String docprefix = hnmsHelpService.getFix(userinfo);
            filePath =docprefix+"/"+CONST.COMMON.FILE_FLORD+"/"+docinfo.getRelativepath()+"/"+"yt_"+docinfo.getDocnewname();
            log.info("=====================ueditor返回的图片url:"+filePath);
			/*你的处理图片的代码*/
            rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
            rs.put("url",filePath);         //能访问到你现在图片的路径
            rs.put("title", originalFileName);
            rs.put("original", originalFileName);                       

        } catch (Exception e) {
            log.error("ueitor上传图片失败：",e);
            rs.put("state", "文件上传失败!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
            rs.put("url","");
            rs.put("title", "");
            rs.put("original", "");
        }
        return rs;
    }