百度UEditor

一、UEditor部署

　　1、下载地址：http://ueditor.baidu.com/website/download.html

　　2、部署项目

　　　  a、解压到webapp下，不要存放WEB-INF包下

　　　  b、复制/jsp/lib目录下的5个jar包到WEB-INF下，然后build path

　　3、如果config.json报错，原因是json文件注释解析错误，可以关闭json校验

　　　  关闭json校验：

                     

二、上传实现

　　上传都是按照单个上传

　　1、上传方式

　　　　图片上传(单图、多图、截图):uploadimage

　　　　涂鸦上传：uploadscrawl

　　　　视频上传：uploadvideo

　　　　音乐上传：音乐是百度在线音乐，不存在上传

　　　　附件上传：uploadfile

　　　　抓取远程图片：catchimage

　　2、拦截请求，修改请求地址至服务器上传

　　　　在Ueditor.all.js后面添加

//截取ActionEnter的请求路径，自定义
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
    if (action == 'uploadimage' || action == 'uploadscrawl'  || action == 'uploadfile') {
        //这里调用后端我们写的图片上传接口
        return 'http://localhost:8080/common/file/uploadFile.do';
    }else if(action == 'uploadvideo'){
        return 'http://localhost:8080/common/file/uploadFile.do';
    }else{
         return this._bkGetActionUrl.call(this, action);
    }
}

})();

　　3、按照指定格式返回json:http://fex.baidu.com/ueditor/#dev-request_specification

 

三、常见问题及解决方案

　　1、已经引入 ueditor.all.js和ueditor.config.js文件，不展示编辑器

　　　原因：文件引入先后顺序有误

　　　解决：

<script type="text/javascript" src="../www/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../www/ueditor/ueditor.all.js"></script>

　　2、复制、粘贴带图片的内容，图片会自动消息

　　   原因：抓取远程图片默认开启，复制的内容里面的图片会自动上传到服务器，如果服务器没有对应的处理，图片就会丢失

　　   解决：方式一----关闭抓取远程图片功能，不下载图片，直接使用网络图片

###修改 ueditor.config.js
###在 window.UEDITOR_CONFIG中，添加
catchRemotelmageEnable:false

　　　　方式二-----实现抓取功能，自动上传到服务器，详情参考"二、上传实现"

　　3、单图上传修改图片尺寸，修改源码

修改 ueditor.all.js 中 UE.plugin.register('simpleupload', function (){ ...该模块下的源码  
      注意看   function callback() 这个方法   增加红色加粗部分的代码就可以了。
    if(json.state == 'SUCCESS' && json.url) {
                            loader = me.document.getElementById(loadingId);
                            loader.setAttribute('src', link);
                            loader.setAttribute('_src', link);
                            loader.setAttribute('title', json.title || '');
                            loader.setAttribute('alt', json.original || '');
                            loader.setAttribute('width', 800);// 修改
                            loader.setAttribute('height', 600);// 修改
                            loader.removeAttribute('id');
                            domUtils.removeClasses(loader, 'loadingclass');
      }

　　4、关闭自动保存

修改 ueditor.all.js 中 UE.plugin.register('autosave', function (){ ...该模块下的源码
      注意看如下：新增红色加粗代码
      'contentchange': function () {
       //新增加的代码,取消本地保存功能
       if (!me.getOpt('enableAutoSave')) {
            return;
       }
       if ( !saveKey ) {
             return;
       }

　　5、上传大文件超市，导致报错

　　　　原因：ueditor文件上传使用的是webuploader.js 这个第三方的上传插件，它的默认超时时间是 2分钟；然而大文件在2min内没法完成上传，是导致报错的问题；

　　　　解决：修改 webuploader.js 下面代码的红色加粗部分

          Transport.options = {
            server: '',
            method: 'POST',
    
            // 跨域时，是否允许携带cookie, 只有HTML5 runtime才有效
            withCredentials: false,
            fileVal: 'file',
            timeout: 30 * 60 * 1000,    //修改为30分钟
            formData: {},
            headers: {},
            sendAsBinary: false
        };

　　6、多图上传，图片顺序混乱

　　　　解决：修改 ueditor/dialogs/image/image.js文件 修改为如下代码的红色加粗部分

uploader.on('uploadSuccess', function (file, ret) {
                var $file = $('#' + file.id);
                try {
                    var responseText = (ret._raw || ret),
                        json = utils.str2json(responseText);
                    if (json.state == 'SUCCESS') {
                        //_this.imageList.push(json);
                        //$file.append('<span class="success"></span>');
                        _this.imageList[$file.index()] = json; // 修改这里：按选择好的文件列表顺序存储
                        $file.append('<span class="success"></span>');
                    } else {
                        $file.find('.error').text(json.state).show();
                    }
                } catch (e) {
                    $file.find('.error').text(lang.errorServerUpload).show();
                }
            });

　　7、多图上传，修改图片尺寸

解决方案：ueditor/jsp/config.json 文件中修配置，按照长边等比压缩
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 8800, /* 图片压缩最长边限制 */

　　8、视频上传回显

　　9、音乐添加