百度编辑器自定义上传接口并回显图片（解决图片存虚拟路径问题）

最新推荐文章于 2025-03-04 17:26:03 发布

liu_qixiang

最新推荐文章于 2025-03-04 17:26:03 发布

阅读量5.6k

点赞数 1

分类专栏： java

本文链接：https://blog.youkuaiyun.com/qi923701/article/details/80242512

版权

java 专栏收录该内容

64 篇文章

订阅专栏

本文介绍如何在项目中集成百度UEditor富文本编辑器，包括配置相关JS和JAR包、设置工具栏按钮及图片上传功能。特别介绍了两种图片上传方式：一种通过虚拟路径存储，另一种则是自定义上传接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先引入相关js和jar包

jar：ueditor-x.x.x.jar

js:

<script src="${ctx }/static/baidu-ueditor/ueditor.config.js"
	type="text/javascript"></script>
<script src="${ctx }/static/baidu-ueditor/ueditor.all.min.js"
	type="text/javascript"></script>
<script src="${ctx }/static/baidu-ueditor/lang/zh-cn/zh-cn.js"
	type="text/javascript"></script>

页面中添加textarea标签

<textarea name="newsContent" id="newsContent"></textarea>

初始化百度编辑器

var editor = UE.getEditor('newsContent',{  
    //这里可以选择自己需要的工具按钮名称
    toolbars:[[ 'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase','simpleupload','insertimage','attachment']],  
    //focus时自动清空初始化时的内容  
    autoClearinitialContent:false,  
    //关闭字数统计  
    wordCount:false,  
    //关闭elementPath  
    elementPathEnabled:false,  
    //默认的编辑区域高度  
    initialFrameHeight:300,
    initialFrameWidth:1100,
    enableAutoSave: false
    //更多其他参数，请参考ueditor.config.js中的配置项  
});

第一种将图片存入虚拟路径的方法（此方法用nginx的时候转发路径没发配置，所以局限较大）

"imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "../../../file1/img/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

tomcat配置的虚拟路径为与tomcat同级的file文件夹（如果不能回显，自己慢慢调整路径）

第二种方法是自定义上传路径

1.首先需要在js中定义上传图片的接口如下（此方法配置nginx转发的时候只要注意更改config.json中的imageUrlPrefix即可）：

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; 
UE.Editor.prototype.getActionUrl = function(action) {
    if (action == 'uploadimage' || action == 'uploadscrawl') {
        return 'http://localhost:8082/bim/WSupload/uploadimage';//这就是自定义的上传地址
    } else if (action == 'uploadvideo') {
        return '';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}

2.config.json中

"imageUrlPrefix": "http://localhost:8082/file1", /* 图片访问路径前缀 */
    "imagePathFormat": "", /* 上传保存路径,可以自定义保存路径和文件名格式 */

3.后台接口方法

@RequestMapping(value = "/uploadimage", method = RequestMethod.POST) 
    @ResponseBody 
    public Map<String, String> uploadimage(@RequestParam(value = "upfile") MultipartFile upfile) { 
        Map<String, String> map = new HashMap<>();
        String fileName=upfile.getOriginalFilename();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
        String filename = sdf.format(new Date()) + new Random().nextInt(1000);
        String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
        filename=filename+"."+fileExt;//存入虚拟目录后的文件名
        File uploadedFile = new File("H:\\file1\\img", filename);//存入虚拟目录后的文件
        try {
            upfile.transferTo(uploadedFile);//上传
            map.put("url", "/img/"+filename);//这个url是前台回显路径（回显路径为config.json中的imageUrlPrefix+此处的url）
            map.put("state", "SUCCESS");
            map.put("original", "");
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return map;
    }

后台返回json规范：

测试。。。