生活不易、且行且珍惜。网站首页 技术分享

关于百度ueditor编辑器上传图片的问题

发布时间：2018-09-25 13:08编辑：zj 阅读：文章分类： Java互动QQ群：170915747

因为博客发布文章需要个富文本编辑器，所见即所得，排版什么的还是很重要的。百了很多最后还是决定用ueditor 虽然已经被百度放弃了（不再更新）但是功能齐全插件多还是很好用的
第一次使用也是照着别人的教程写的

下载最新的ueditor-jsp版（根据自己的需求下载）http://ueditor.baidu.com/website/download.html

然后把下载好的内容放到web项目的webapp下，然后导包，我是直接把jar复制到web-inf的lib下然后build path，虽然这样会感觉好像太原始了。。，直接用maven导入会有问题，好像是因为ueditor不存在远程和本地仓库，不过可以在pom.xml中导入然后再把jar包复制到本地仓库，或者自己创建个私服然后把jar包放进去。。
修改config.json，

"imageUrlPrefix": "http://www.zjhuiwan.cn/****", /* 图片访问路径前缀项目根路径
                                              -这里写的是Tomcat配置的虚拟目录*/ 
"physicsPath":"/**/***/***", /*F:/zjblogImg/upload上传到本地必填，
                           非本地为空即可*/
"imagePathFormat": "/ueditorImage/{yyyy}{mm}{dd}/{time}{ss}{rand:6}",
        /* 上传保存路径,可以自定义保存路径和文件名格式 */







最后页面引入这几个js

<script type="text/javascript" charset="utf-8"
    src="ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8"
    src="ueditor/lang/zh-cn/zh-cn.js"></script>







[然后这样引入ueditor

<textarea name="articleDetail" id="articleDetail" style="width: 800px; 
height: 550px;overflow: auto; margin: 0 auto;"></textarea>

<script type="text/javascript">
        var ue = UE.getEditor("articleDetail");
    </script>




 后台直接根据form中的name接收即可，保存的是HTML代码。这样就可以排版了。





运行发现出来了



注意springmvc要配置放行




 <!-- 3.配置jsp 显示ViewResolver -->
     <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view
        .JstlView" />
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
     </bean>







但是使用的时候还是发现问题，上传成功后，重启Tomcat会删掉图片，因为我们是上传到了Tomcat下的webapp目录下的项目中，而我们MyEclipse中的项目和Tomcat下的项目实际是两个，重启Tomcat时会重新部署项目，也就是把原来的xm覆盖掉了，图片也就被删了。
为了解决这个问题我们应该把上传的图片放到专门的位置，一般项目静态资源回放独立的服务器，这里我就直接是放跟项目同级的Tomcat根目录下。当然也可以放硬盘其他地方，比如D:/img/upload




图片上传代码：

/**
     * @Description:文件上传
     * @param file
     * @return
     */
    public static String saveFile(MultipartFile file, HttpServletRequest request) {
        // 判断文件是否为空
        if (!file.isEmpty()) {
            try {
                // 获取3位的随机数
                int num = (int)(100 + Math.random() * (999 - 1 + 1));
                // 设置日期格式
                SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmsss");
                
                String dateTime = df.format(new Date());
                // 取文件格式后缀名
                String type = file.getOriginalFilename().substring(file.
                getOriginalFilename().indexOf("."));
                // 上传文件名
                String fileName = dateTime + num + type;// 取当前时间戳作为文件名
                // 上传文件路径(保存项目根路径)
                // String path = request.getSession().getServletContext().
                getRealPath("/upload/otherImg");
                // 保存本地
                String path = "/usr/zjblogImg/upload/otherImg";
                // String path = "F:/zjblogImg/upload/otherImg";
                // 判断路径是否存在，如果不存在就创建一个
                File filePath = new File(path, fileName);
                if (!filePath.getParentFile().exists()) {
                    filePath.getParentFile().mkdirs();
                }
                // 转存文件
                file.transferTo(new File(path + File.separator + fileName));
                return fileName;
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return " ";
    }

#去评论一下