富文本编辑器UEditor的使用上传图片到图片服务器

当大家使用了UEditor之后，会发现其自带的图片上传方法只能存在项目当中，每当项目重新发布，之前的数据就无法自动保存。这个时候就需要我们修改图片上传方式，将图片保存在数据库或电脑的其他地方，从而解决这个问题。如果大家研究的仔细的话，利用chrome浏览器F12中有一个Network功能，能看到一次加载的所有网址。当大家在进行图片上传时，UEditor会自动执行`controller.jsp?action=upload`这个方法。其实从config.json中也可以看出，其中有这么一句话：

"imageActionName" : "uploadimage" , /* 执行上传图片的action名称 */

首先你需要先下载好ueditor 的包导入你的项目

因此我们的思路就是让它不执行这个action，转而执行我们需要的action，解决方法如下：

1、jsp页面上需要修改的地方

在你的页面代码中应该有类似这样的话：

在下面加上：

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {
    if (action == 'uploadimage') {
        var url = '${org.codehaus.groovy.grails.commons.ConfigurationHolder.config.admin.path}product/uploadIMG';
        return url;
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
};

2、action的修改方法

先看一下官方开发文档给出的后端请求规范，里面有设计到uploadimage的传值规范：因此，我们传值的必须包含state、url、title、original四个部分（state如果不是success的话，前端的报错信息就会显示state里包含的内容，因此大家在写的的时候可以在此注意）我用的是SpingMVC框架，后端的处理是利用controller，返回值则是Map即可：

3、修改config.json

因为现在你的上传图片的方式已经改变了，并不是用UEditor原生自带的方式，因此需要修改将“imageUrlPrefix”设置为空，不需要任何前缀，你自己已经给出了url（如果你给出的url缺少前缀的话，可以继续在这里添加）。

至此便大功告成，如果大家还有什么问题，欢迎留言，大家可以一起讨论。

<script type="text/javascript" charset="utf-8"
        src="${request.getContextPath()}/UEditor/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
        src="${request.getContextPath()}/UEditor/utf8-jsp/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
        src="${request.getContextPath()}/UEditor/lang/zh-cn/zh-cn.js"></script>

<g:textArea id="description" name="description" style="width: 700px; height: 200px; ">
</g:textArea>

设置个textarea 文本框 添加id

进行ueditor 的初始化参数设置

var description = UE.getEditor('description', {
    toolbars: [[
        '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'
    ]]
});

设置你自己的action，controller

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {
    if (action == 'uploadimage') {
        var url = '${org.codehaus.groovy.grails.commons.ConfigurationHolder.config.admin.path}product/uploadIMG';
        return url;
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
};

这里上后台串过来的file流进行你自己的地址就行存储就可以了

def uploadsFile(def file, def uploadPath) {
    Map<String, Object> rs = new HashMap<String, Object>();
    String fileName = ""
    try {
        def filePath = ""
        if (file.empty) {
            rs.put("state", "文件空值!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
            rs.put("url", "");
            rs.put("title", "");
            rs.put("original", "");
        } else {
            def userDir = new File(uploadPath)
            userDir.mkdirs()
            println "file.originalFilename:" + file.originalFilename
            String originalFilename = file.originalFilename
            fileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())
            fileName = fileName.concat(originalFilename.substring(originalFilename.lastIndexOf("."), originalFilename.length()))
            File picDir = new File(userDir, fileName)
            file.transferTo(picDir)
            println "picDir.getCanonicalPath():" + picDir.getCanonicalPath()
            filePath = picDir.getCanonicalPath().replaceAll("\\\\", "/")

        }
        /*你的处理图片的代码*/
        rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
        /*  rs.put("url", "http://192.168.0.100:9090/wosh-boss/img/"+fileName); */        //能访问到你现在图片的路径
        rs.put("url", fileName);         //能访问到你现在图片的路径
        rs.put("title", fileName);
        rs.put("original", fileName);
    } catch (Exception e) {
        log.error(e.getMessage(), e);
        rs.put("state", "文件上传失败!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
        rs.put("url", "");
        rs.put("title", "");
        rs.put("original", "");
    }
    return rs;
}

上传file 你需要给他返回页面一个信息，这个信息的格式是json 的，所以在写完图片进行了put 几个信息，这里不put他的这几个信息是会出错的