百度UEditor

1、UEditor部署

　　一、下載地址：http://ueditor.baidu.com/website/download.html

　　二、部署項目

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

　　　  b、複製/jsp/lib目錄下的5個jar包到WEB-INF下，而後build path

　　三、若是config.json報錯，緣由是json文件註釋解析錯誤，能夠關閉json校驗

　　　  關閉json校驗：

                     

2、上傳實現

　　上傳都是按照單個上傳

　　一、上傳方式

　　　　圖片上傳(單圖、多圖、截圖):uploadimage

　　　　塗鴉上傳：uploadscrawl

　　　　視頻上傳：uploadvideo

　　　　音樂上傳：音樂是百度在線音樂，不存在上傳

　　　　附件上傳：uploadfile

　　　　抓取遠程圖片：catchimage

　　二、攔截請求，修改請求地址至服務器上傳

　　　　在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);
    }
}

})();

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

 

3、常見問題及解決方案

　　一、已經引入 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>

　　二、複製、粘貼帶圖片的內容，圖片會自動消息

　　   緣由：抓取遠程圖片默認開啓，複製的內容裏面的圖片會自動上傳到服務器，若是服務器沒有對應的處理，圖片就會丟失

　　   解決：方式一----關閉抓取遠程圖片功能，不下載圖片，直接使用網絡圖片

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

　　　　方式二-----實現抓取功能，自動上傳到服務器，詳情參考"2、上傳實現"

　　三、單圖上傳修改圖片尺寸，修改源碼

修改 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');
      }

　　四、關閉自動保存

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

　　五、上傳大文件超市，致使報錯

　　　　緣由：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 };

　　六、多圖上傳，圖片順序混亂

　　　　解決：修改 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();
                }
            });

　　七、多圖上傳，修改圖片尺寸

解決方案：ueditor/jsp/config.json 文件中修配置，按照長邊等比壓縮
"imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
"imageCompressBorder": 8800, /* 圖片壓縮最長邊限制 */

　　八、視頻上傳回顯

　　九、音樂添加