基于百度编辑器Ueditor的二次开发

在业务开发的时候，曾经使用过wangEditor、Quill、CKEditor，但是后面提出的新需求（需要可以复制微信公众号文章的样式，可以从excel中复制表格），之前使用的编辑器都不能满足，发现Ueditor都满足这个需求，所以把Ueditor研究了一遍，并进行二次开发，在此记录一下。

官网下载

下载地址：https://ueditor.baidu.com/website/download.html
官方文档地址：http://fex.baidu.com/ueditor/

我下载的是1.4.3.3 Jsp版本utf-8，其他版本的编辑器部分应该是一致的，只是后台对接的部分不同。

基本配置

上面这一部分地址的设置是设置服务器的统一接口路径
但其实我是没有用到的，因为我对图片上传的地址做了额外的设置：

var myUEditor = UE.getEditor('ueditor-container');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
// 对上传图片的地址做特殊设置
UE.Editor.prototype.getActionUrl = function(action) {
   
   
    if (action == 'uploadimage' || action == 'uploadscrawl') {
   
   
        return 'http://img.XXXXXXX.com/imgserver/front/uploadImagesByUEditor'; //在这里返回我们实际的上传图片地址
    } else {
   
   
        return this._bkGetActionUrl.call(this, action);
    }
}

简化后端配置，不请求后端配置项

解压官网下载的压缩包，直接打开index.html，点开关于上传的按钮(图片上传、附件上传)都会报错：
“请求后台配置项http错误，上传功能将不能正常使用！”
如下图所示：

查看了下源码，大致原理就是：
如果需要使用上传功能的话，就需要让后端新写一个接口返回一个json（这个json数据就是在jsp文件夹下的config.json）,编辑器要获取到这个json才算是请求后台配置项成功，才可以正常使用上传功能。
查看了一下这个config.json文件，发现是关于一些文件大小的限制，上传字段名，完全静态，所以其实这部分直接写在前端，无需从后台请求也是可以的，而且这样也不用麻烦后台小哥哥（但不知道是否有安全问题，可能我的理解比较浅显）。

以下是修改步骤（修改一小部分源代码）：
打开ueditor.all.js文件，大概是8082行：

    setTimeout(function(){
   
   
       	// 修改这个setTimeout里面的内容       	
       	try{
   
   
           	me.options.imageUrl && me.setOpt('serverUrl', me.options.imageUrl.replace(/^(.*[\/]).+([\.].+)$/, '$1controller$2'));
              var configUrl = me.getActionUrl('config'),
              isJsonp = utils.isCrossDomainUrl(configUrl);
   
              /* 发出ajax请求 */
              me._serverConfigLoaded = false;
   
              configUrl && UE.ajax.request(configUrl,{
   
   
                  'method': 'GET',
                  'dataType': isJsonp ? 'jsonp':'',
                  'onsuccess':function(r){
   
   
                      try {
   
   
                      		//这部分是请求数据成功后执行的逻辑，咱们直接给config赋值，然后直接执行这部分逻辑即可。
                          var config = isJsonp ? r:eval("("+r.responseText+")");
                          utils.extend(me.options, config);
                          me.fireEvent('serverConfigLoaded');
                          me._serverConfigLoaded = true;
                      } catch (e) {
   
   
                          showErrorMsg(me.getLang('loadconfigFormatError'));
                      }
                  },
                  'onerror':function(){
   
   
                      showErrorMsg(me.getLang('loadconfigHttpError'));
                  }
              });
           } catch(e){
   
   
               showErrorMsg(me.getLang('loadconfigError'));
           }
       });

修改后：

setTimeout(function(){
   
   
    try{
   
   
        me.options.imageUrl && me.setOpt('serverUrl', me.options.imageUrl.replace(/^(.*[\/]).+([\.].+)$/, '$1controller$2'));
       // 这里的config就是JSP文件夹下的config.json数据 这里根据需求做了删减，你们可以去那个文件重新粘贴。
        var config = {
   
   
            // "basePath":"",
            "imageActionName": "uploadimage", 
            "imageFieldName": "upfile", 
            // 图片上传大小的限制：10M
            "imageMaxSize": 10*1024*1024, 
            "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], 
            "imageCompressEnable": true, 
            "imageCompressBorder": 1600, 
            "imageInsertAlign": "none", 
            "imageUrlPrefix": "http://img.xueersipeiyou.com:8093/files", 
            "imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}", 
                                        
            "fileActionName": "uploadfile", 
            "fileFieldName": "upfile", 
            "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", 
            "fileUrlPrefix": "", 
            "fileMaxSize": 51200000, 
            "fileAllowFiles": [
                ".png", ".jpg", ".jpeg", ".gif", ".bmp",
                ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
                ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
                ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
                ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
            ], 

            "imageManagerActionName": "listimage", 
            "imageManagerListPath": "/ueditor/jsp/upload/image/", 
            "imageManagerListSize": 10, 
            "imageManagerUrlPrefix": "", 
            "imageManagerInsertAlign": "none", 
            "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], 

            "fileManagerActionName": "listfile", 
            "fileManagerListPath": "/ueditor/jsp/upload/file/", 
            "fileManagerUrlPrefix": "", 
            "fileManagerListSize": 10, 
            "fileManagerAllowFiles": [
                ".png", ".jpg", ".jpeg", ".gif", ".bmp",
                ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
                ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
                ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
                ".doc", ".docx", ".xls", ".xlsx"