若依框架整合[SpringBoot+百度Ueditor]-图片、视频上传并回显，解决部署服务器后加载config.json配置失效，上传图片等功能不能使用的问题

若依-SpringBoot-整合百度Ueditor

百度Ueditor遇到的问题

1. 不能使用多图上传
2. 不能讲图片上传至服务器
3. 不能上传视频
4. 程序在本地能正常运行，部署服务器[图片上传/多图/视频]都不好使了。
5. 上传之后样式发生了改变

本文档按照以下顺序进行讲解，如果需要查询错误如何解决，可直接点击上面锚点进行跳转

	集成百度Ueditor--->整合百度Ueditor的添加、修改、回显--->解决项目中遇到的问题

第一步：整合百度Ueditor

1. 下载百度Ueditor

1. 百度网盘下载地址ueditor1.4.3百度网盘提取地址–提取码：vxg8
2. 官网下载地址：Ueditor GitHub地址

---

2. 解压下载的文件

---

3. 将解压的文件放入工程目录中如下图所示

---

4. 导入相关依赖

commons-fileupload
commons-fileupload
1.3.2



commons-codec
commons-codec
1.9



com .gitee.qdbp.thirdparty
ueditor
1.4.3.3

---

5.开始在页面中整合富文本

1. 在HTML页面中添加如下需要加载富文本的内容

    一、添加HTML代码
    
    
    
    二、引入富文本需要的JS
    
    
    
    
    
    
    三、使用js初始化富文本容器
    

完成第一步你就能在界面上看到富文本的界面了,但是很多功能都不能使用
我们可以通过“ueditor.config.js”中的toolbars来控制富文本的功能

2. 使Ueditor功能正常

    找到Ueditor下的“ueditor.config.js”文件(路径为:ueditor/ueditor.config.js)修改如下：
    
    ①、在ueditor.config.js下面添加全局变量
     var server_url=window.location.protocol+"//"+window.location.hostname+":"+window.location.port
    ②、修改serverUrl：为
    serverUrl: server_url+"/config"
    修改完成如下图

上面主要在做两个事情:1.获取当前服务器的地址；2.设置Ueditor访问后台获取配置的地址路径

---

解决上传服务器配置文件失效的问题

3. 创建UEditorController，并添加config的请求地址-[此config处理方法不用修改源码，部署服务器无异常-亲测有效]需要注意的是:需要吧[static/ueditor/jsp/config.json]复制一份到resource目录下

一、便捷config接口。
@RequestMapping(value = "/config")
    public void config(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Content-Type", "text/html");
        // jar包里的json文件只能通过流读取
        ClassPathResource classPathResource = new ClassPathResource("config.json");
        StringBuilder builer= new StringBuilder();
        InputStream inputStream = classPathResource.getInputStream();
        try {
            InputStreamReader reader = new InputStreamReader(classPathResource.getInputStream(),"UTF-8");
            BufferedReader bfReader = new BufferedReader(reader);
            String temContent = null;
            while ((temContent = bfReader.readLine()) != null){
                builer.append(temContent);
            }
            String exec =  builer.toString().trim();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
            bfReader.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    

4. 修改config.json中的内容

• 下面用图片的来进行说明-需要注意的是[视频同理]
  • imageUrlPrefix如果上传至文件服务器可以不用配置，但是如果是本地就需要配置为服务器访问地址
  • imageFieldName上传是后台接口接受参数的名称

    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "file", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

完成了上面步骤，你就能正常的在富文本中编辑内容了，图标功能正常使用

---

开始整合图片/视频上传

1. 修改图片/视频上传访问地址-在HTML中添加图片视频访问地址

    因为图片上传内部源码是上传到本地，所有我们不能使用默认的我们需要通过js代码来进行判断控制图片上传服务器的地址:
     

---

修改js文件

• 修改ueditor.config.js文件

  ①、在"ueditor.config.js"文件中 搜索“whitList” 然后修改img参数如下图，添加 
 ,'_url','style''
 
  ②、 在白名单末尾添加如下参数：
            source: ['src', 'type'],
			embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
			iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']
 

• 修改“ueditor.all.js”文件 修改完成如下图

  • 修改img标签为video

    搜索关键词：“insertvideo”
    修改完成之后如下：
      execCommand: function (cmd, videoObjs, type){
        videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];
        var html = [],id = 'tmpVedio', cl;
        for(var i=0,vi,len = videoObjs.length;i

  

  • 注释掉如下代码

  关键字":"notFireSelectionchange"
  - 修改完成后入下
  setContent: function (html, isAppendTo, notFireSelectionchange) {
          var me = this;
  
          me.fireEvent('beforesetcontent', html);
          // 防止编辑看不到视频
          // var root = UE.htmlparser(html);
          // me.filterInputRule(root);
          // html = root.toHtml();
  
          me.body.innerHTML = (isAppendTo ? me.body.innerHTML : '') + html;
  
  
          function isCdataDiv(node){
              return  node.tagName == 'DIV' && node.getAttribute('cdata_tag');
          }
      
  

---

• 修改ueditor/dialogs/video/video.js文件

    主要操作是使用video标签用于回显使用
    
    
    将函数createPreviewVideo修改为如下
     function createPreviewVideo(url){
        if ( !url )return;

        var conUrl = convert_url(url);

        conUrl = utils.unhtmlForUrl(conUrl);

        // $G("preview").innerHTML = '
'+lang.urlError+'
'+
        // '' +
        // '';
        $G("preview").innerHTML = '';
    }

---

添加上传图片/上传视频的接口地址

1. 添加第一大点JS中添加的地址接口

注意：

    图片与视频上传成之后响应信息为
    res.put("state", "SUCCESS");
    res.put("url", serverConfig.getExternalUrl() + url);
    res.put("title", fileName);
    res.put("original", fileName);
    // 其中url为能直接访问的地址
    // state 为必须值

---

编辑回显方法

• 使用一下JS可供回显

   
    
    如下图

---

如果项目中集成了xss，在新增与编辑时xss会将我们富文本中的html标签去掉，所有在使用时需要对新增、编辑接口添加进白名单中。

---

解决只上传视频文件导致视频文件丢失

• 修改ueditor.all.js文件并在video下添加一下参数

添加内容为
解决单个视频上传保存为空的问题


搜索关键字:创建插入视频字符窜 || creatInsertStr
switch (type){
            case 'image':
                str = ''
                break;
            case 'embed':
                str = '';
                break;
            case 'video':
                var ext = url.substr(url.lastIndexOf('.') + 1);
                if(ext == 'ogv') ext = 'ogg';
                str = '' +
                    '
                        // 下面为新增内容 ▼
                       // 下面为新增内容 ▼
                      // 下面为新增内容 ▼
                     // 下面为新增内容 ▼
                    // 下面为新增内容 ▼
                    insert
'
                    // 上面为新增内容 ▲
                     // 上面为新增内容 ▲
                      // 上面为新增内容 ▲
                       // 上面为新增内容 ▲
                        // 上面为新增内容 ▲
                         // 上面为新增内容 ▲
                          // 上面为新增内容 ▲
                    ;
                break;
        }