UEditor上传图片和文件

UEditor的使用路过的坑

心累的开始
找了很多方法都不行，但是都是软件惹的祸，没有clean完全
不多说了，接下来就是代码区
官网下载最新包，解压缩
图片:

复制到webapp目录下

修改相关配置文件

如果是想关闭本地保存的也可参考这个博客
https://blog.csdn.net/qq_31879707/article/details/54895756
此处也粘贴过来了

ueditor.config.js文件中设置enableAutoSave参数为false就可以关闭本地保存功能。
 //启用自动保存
 ,enableAutoSave: false
ueditor1.4.3版本是没有效果的，需要修改代码，在ueditor1.5.0版本已经得到修复。
修改方法
ueditor.all.js文件
找到
// plugins/autosave.js
UE.plugin.register('autosave', function (){
    var me = this,
        //无限循环保护
        lastSaveTime = new Date(),
        //最小保存间隔时间
        MIN_TIME = 20,
        //auto save key
        saveKey = null;
    function save ( editor ) {
        var saveData;
        if ( new Date() – lastSaveTime < MIN_TIME ) {
            return;
        }
        if ( !editor.hasContents() ) {
            //这里不能调用命令来删除， 会造成事件死循环
            saveKey && me.removePreferences( saveKey );
            return;
        }
        lastSaveTime = new Date();
        editor._saveFlag = null;
        saveData = me.body.innerHTML;
        if ( editor.fireEvent( "beforeautosave", {
            content: saveData
        } ) === false ) {
            return;
        }
        me.setPreferences( saveKey, saveData );
        editor.fireEvent( "afterautosave", {
            content: saveData
        } );
    }
    return {
        defaultOptions: {
            //默认间隔时间
            saveInterval: 500
        },
        bindEvents:{
            'ready':function(){
                var _suffix = "-drafts-data",
                    key = null;
                if ( me.key ) {
                    key = me.key + _suffix;
                } else {
                    key = ( me.container.parentNode.id || 'ue-common' ) + _suffix;
                }
                //页面地址+编辑器ID 保持唯一
                saveKey = ( location.protocol + location.host + location.pathname ).replace( /[.:\/]/g, '_' ) + key;
            },
            'contentchange': function () {
               //新增加的代码
                if (!me.getOpt('enableAutoSave')) {
                    return;
                }
                if ( !saveKey ) {
                    return;
                }
                if ( me._saveFlag ) {
                    window.clearTimeout( me._saveFlag );
                }
                if ( me.options.saveInterval > 0 ) {
                    me._saveFlag = window.setTimeout( function () {
                        save( me );
                    }, me.options.saveInterval );
                } else {
                    save(me);
                }
            }
        },
        commands:{
            'clearlocaldata':{
                execCommand:function (cmd, name) {
                    if ( saveKey && me.getPreferences( saveKey ) ) {
                        me.removePreferences( saveKey )
                    }
                },
                notNeedUndo: true,
                ignoreContentChange:true
            },
            'getlocaldata':{
                execCommand:function (cmd, name) {
                    return saveKey ? me.getPreferences( saveKey ) || '' : '';
                },
                notNeedUndo: true,
                ignoreContentChange:true
            },
            'drafts':{
                execCommand:function (cmd, name) {
                    if ( saveKey ) {
                        me.body.innerHTML = me.getPreferences( saveKey ) || '<p>'+domUtils.fillHtml+'</p>';
                        me.focus(true);
                    }
                },
                queryCommandState: function () {
                    return saveKey ? ( me.getPreferences( saveKey ) === null ? -1 : 0 ) : -1;
                },
                notNeedUndo: true,
                ignoreContentChange:true
            }
        }
    }
});


以下是新增加的代码
if (!me.getOpt('enableAutoSave')) {
    return;
}

ueditor1.4.3版本自动保存关闭不了
https://github.com/fex-team/ueditor/issues/470
已在1.5.0分支修改
https://github.com/fex-team/ueditor/blob/dev-1.5.0/_src/plugins/autosave.js#L71-73

下面就是自己代码区的编写了

打开要使用嵌入的jsp页面
引入相关的js

<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/utf8-jsp/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/utf8-jsp/lang/zh-cn/zh-cn.js"></script>

<body>
!-- 加载编辑器的容器,可为div等其他的标签，提供ID就好 -->
<textarea id="uploadEditor" style="display: none;"></textarea>
</body>


<!-- 使用ue -->
<script type="text/javascript">
 //实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('uploadEditor',{
    pasteplain: true, /* 纯文本粘贴 */
        autoHeightEnabled:false,/* 启用右侧滚轮,默认是true自动长高模式*/
        toolbars: [[
        'fullscreen', 'source', '|', 'undo', 'redo', '|',
        'bold', 'italic', 'underline',
        'removeformat', '|',
        'insertorderedlist', 'insertunorderedlist',
        'indent', '|', 'justifyleft', 'justifycenter',
        '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', 'insertimage',
        '|', 'link', 'unlink'
    ]]
});
//此处是定义自己的controller访问上传
UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl=function(action){
    if (action == 'uploadImage' ||action== 'uploadscrawl' || action == 'uploadimage') {
        return "${basePath}/notice/uploadImage";
    } else if(action =='uploadvideo') {
        return "${basePath}/upload";
    } else if(action == 'listimage'){
        return "${basePath}/download";
    } else{
        return this._bkGetActionUrl.call(this, action);
    }
}
</script>

//初始化之后可通过函数调用
如：var content = UE.getEditor('uploadEditor').getContent();获取html内容

jsp页面差不多完成了
当然离不开jar的支持
pom.xml

<!--MT:文件上传-->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>

相关的controller编写
因为使用的是七牛云上传，service层就不贴了

// 图片上传
    @RequestMapping("uploadImage")
    @ResponseBody
    public UEResult uploadImage(HttpServletRequest request, HttpServletResponse response)
            throws IllegalStateException, IOException{
             UEResult result = new UEResult();
            response.setContentType("text/html;charset=UTF-8");
      //  ReturnUploadImage  = null;//这个是UEditor需要的返回值内容，UEditor要的返回值需要封装成Json格式
// 转型为MultipartHttpRequest：
            MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest) request;
// 获得文件：
            MultipartFile file =multipartRequest.getFile("upfile"); //UEditor传到后台的是这个upfile，其他的文件上传，应该也差不多是这个，还没去研究，断点一下就知道了
        if (null != file){
            try {
            //返回的是图片路径，返回到前端就好
                String s =  UploadImage.saveImage(file);
                if (s != null){
                    result.setTitle(s);
                    result.setOriginal(s);
                    result.setState("SUCCESS");
                    result.setUrl(s);
                    return result;
                }
            }catch (IOException f){
                logger.debug(f);
            }
        }
        result.setTitle(file.getName());
        result.setOriginal(file.getName());
        result.setState("FAIL");
        result.setUrl(null);
        return result;
    }

返回格式也有要求的哦

简单封装了一个entity

public class UEResult {
private String title;    //这里需要设置文件名称如
private String original;    //这里需要设置文件名称如
private String state;    //上传状态 SUCCESS必须大写
private String url; //图片的url
private String code;
}

基本上完成了。也是找了很多博客找出来的，勿喷，请指教！