ueditor上传图片到ftp服务器

下载地址   https://ueditor.baidu.com/website/download.html

导入依赖

            <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
            <dependency>
                <groupId>commons-codec</groupId>
                <artifactId>commons-codec</artifactId>
                <version>1.9</version>
            </dependency>

            <!-- https://mvnrepository.com/artifact/org.json/json -->
            <dependency>
                <groupId>org.json</groupId>
                <artifactId>json</artifactId>
                <version>20160810</version>
            </dependency>
            <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
            <dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>1.3.1</version>
            </dependency>
            <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.1</version>
            </dependency>

如果不是maven项目的话,这里有jar包

config.json添加两条信息

 /* 上传图片配置项 */
    "useFtpUpload": "true", /* 是否使用FTP上传 */
    "keepLocalFile": "false", /* 使用FTP上传后本地服务器是否保存 */

上面那个nginx路径是图片上传成功后回显使用的.

修改ueditor.config.js文件

源码下载地址,我已经改好了不用改了

https://download.csdn.net/download/kxj19980524/11655955

导入源码,修改源码

在switch这里加这么一段,在哪个case下面加无所谓,它这里应该就是让扩展的因为上面的case都没有break,所以往下面加就行,能让执行就可以了,这里是case就是判断上传的是音频还是视频还是图片之类的,都一样.

记得把工具类里面的信息改掉,账号密码啥的.

然后其实自己打断点看代码怎么执行的就懂了,接下的就是FtpUploader工具类上传了,我就不截了,下载源码里都有.

然后自己写个controller,写上俩方法,下面这个方法是入口与出口的方法,url就按照这么写.

static\\ueditor这个是自己ueditor的路径,我放static下面了,

需要注意把这个文件夹名字改为jsps

package com.zy.zs.controller.commodityController;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.baidu.ueditor.ActionEnter;
import com.baidu.ueditor.utils.FtpUtils;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.PropertySource;
import org.springframework.stereotype.Controller;
import org.springframework.util.ClassUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;

/**
 * @author kxj
 * @version 1.0
 * @date 2019/8/30 10:19
 */
@Controller
public class UeditorController {

    @ResponseBody
    @RequestMapping(value = "ZSCommodity/getUeditorConfig")
    public String getUed2(HttpServletRequest request, HttpServletResponse response) {
        String ued = getUed(request, response);
        return ued;
    }

    @ResponseBody
    @RequestMapping(value = "jsps/getUeditorConfig")
    public String getUed(HttpServletRequest request, HttpServletResponse response) {
        String json="";
        try {
            String rootPath=request.getServletContext().getRealPath("/");
            //String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath();
            json = new ActionEnter( request, rootPath+"static\\ueditor\\" ).exec();;
            //logger.info(json);
        } catch (Exception ex) {
            //logger.error("showPhoto -=- {}", ex.toString());
        }

        return json;//JSONObject.toJSONString(parse)
    }

    /**
     * UEditor 查看图片使用
     * @param response
     * @param path
     */
    @RequestMapping("/showPhotoUE")
    public void showPhotoUE(HttpServletResponse response, String path) {
        try {
            String newPath = "";
            if (path.contains("?") && StringUtils.isNotEmpty(path)){
                newPath = path.substring(0,path.lastIndexOf("?"));
            }else {
                newPath = path;
            }
            if (StringUtils.isNotEmpty(newPath)) {
                //Thread.sleep(500);
                new FtpUtils().showPhoto(response, newPath);
            }
        } catch (Exception ex) {
            //logger.error("showPhoto -=- {}", ex.toString());
        }
    }
}

这个方法是我在写修改回显的时候,不知道为啥调了一下这个路径,然后我就给加上了,又指定到下面的入口方法上了,这个路径是根据自己情况而定的,自己遇到的时候改为相应的路径就可以了

下面这个是ueditor 在页面的初始化.

<script src="${pageContext.request.contextPath}/static/ueditor/ueditor.config.js"></script>
<script src="${pageContext.request.contextPath}/static/ueditor/ueditor.all.js"></script>   
          

  <script type="text/plain" id="myEditor">
                ${pageContext.request.getAttribute("productDetails").productDetailsMsg}
            </script>
    
    



    <script type="text/javascript">
        // UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

        var ue = UE.getEditor('myEditor',{
        //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
        //toolbars:[['FullScreen','simpleupload','Source', 'Undo', 'Redo','Bold','test']],
        //focus时自动清空初始化时的内容
          //  autoClearinitialContent:true,
        //关闭字数统计
            wordCount:false,
        //关闭elementPath
            elementPathEnabled:false,
        //默认的编辑区域高度
            initialFrameHeight:300
        //更多其他参数，请参考ueditor.config.js中的配置项
        });


        /* UE.Editor.prototype.getActionUrl = function(action) {
        //这里很重要，很重要，很重要，要和配置中的imageActionName值一样
        if (action == 'fileUploadServlet') {
        //这里调用后端我们写的图片上传接口
        return 'http://localhost:8081/Test/fileUploadServlet';
        }else{
        return this._bkGetActionUrl.call(this, action);
        }
        } */


    </script>