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

2022-06-21 14:38:51 浏览数 (1)

因为博客发布文章需要个富文本编辑器,所见即所得,排版什么的还是很重要的。百了很多最后还是决定用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,

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

最后页面引入这几个js

代码语言:javascript复制
<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

代码语言:javascript复制
<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要配置放行

代码语言:javascript复制
 <!-- 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

图片上传代码:

代码语言:javascript复制
/**
     * @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 " ";
    }

0 人点赞