SpringBoot 整合 UEditor 详细教程（二）| 遇到的问题

我不是女神ヾ 2022-12-02 03:53 1203阅读 0赞

### SpringBoot 整合 UEditor 详细教程（二）| 遇到的问题 ###

--------------------

#### 目录 ####

具体踩坑点：

*  1.自定义 toolbars 时出现 Could not parse as expression 异常
 *  2.前端报错：请求后台配置项http错误，上传功能将不能正常使用
 *  3.报错："\\u914d\\u7f6e\\u6587\\u4ef6\\u521d\\u59cb\\u5316\\u5931\\u8d25"（配置文件初始化失败）
 *  4.配置上传图片，报错 ： 无效的Action
 *  5.注释多图上传里面的其他按钮
 *  6.注释部分功能无法使用的代码
 *  7.保存成功后无法正常显示文字和图片，或显示为空白
 *  8.部署到服务器又出现了第3点的问题，加载不到config.json文件

--------------------

### 1. 自定义 toolbars 时出现 Could not parse as expression 异常： ###

因为我这里用的是 thymeleaf 模板引擎，所以将 script 标签改为：

以下是前端代码，去除了 toolbars 中不常用的工具按钮：

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org" xmlns:se="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
        
        <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
        
        <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
    </head>
    
    <body>
        <div>
            <textarea id="ueditor" name="content" style="min-height: 500px"></textarea>
        </div>
    </body>
    
    
    <script type="text/javascript" th:inline="none">
        var ue = UE.getEditor('ueditor', { 
            toolbars: [[
                'fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload', 'map', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'spechars', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'preview', 'searchreplace', 'drafts'
            ]]
        });
    </script>
    
    </html>

--------------------

### 2. 如果前端报错：请求后台配置项http错误，上传功能将不能正常使用： ###

一般是路径没有对应上或者配置错误，可参考下面的截图

*  第一个URL是自带的，好像默认请求路径是：IP + 端口 + “/ueditor/config”
 *  第二个serverUrl是自己写的，参考我的可以直接获取到当前项目的路径，也可以自己写（如：http://127.0.0.1:8080/）这样  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 1]

--------------------

### 3.如果报错："\\u914d\\u7f6e\\u6587\\u4ef6\\u521d\\u59cb\\u5316\\u5931\\u8d25"（配置文件初始化失败） ###

3.1.因为没次打开都会请求，在浏览器查看路径，直接copy下图红色框内的路径到浏览器新窗口打开：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 2]

3.2.检查config.json配置文件是否正确（不知道路径的看3.1）： http://localhost:8090/ueditor/config?action=config

*  如果返回：\{“state”: “\\u914d\\u7f6e\\u6587\\u4ef6\\u521d\\u59cb\\u5316\\u5931\\u8d25”\}，即表示配置文件初始化失败。
 *  如果返回一大串 JSON 格式的字符串，则表示成功。
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 3]

原因是没有正确读取到 config.json 文件

3.3.解决方法：

可跟踪如下第一点的源码进行定位：

找到问题是因为没有读取到正确的文件路径（定位到问题后我将第二点的路径加上了 “/config.json” ）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 4]

源码定位步骤：（主要看 ConfigManager 类的构造方法里面的 this.originalPath 路径是否正确）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 6]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 7]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 8]

--------------------

### 4.配置上传图片，报错 ： 无效的Action  ###

我这里使用的是自定义的方法进行上传

自定义上传路径：

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) { 
        if (action === 'uploadimage') { 
            return '/ueditorUpload';
        } else { 
            return this._bkGetActionUrl.call(this, action);
        }
    }

这里的`“/ueditorUpload”` 跟 `ueditor.config.js` 中的入口是在一个Controller中的不同方法，如果是别的方法，需要使用 IP + 端口 + 方法的方式请求

![在这里插入图片描述][20200829151110481.png_pic_center]  
方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 9]  
代码：

/** * UEditor 上传图片（单个或多个） * @return 返回提示信息 */
        @RequestMapping(value = "/ueditorUpload", method = RequestMethod.POST)
        public Object upLoadImg(MultipartFile upfile){ 
            Map<String,Object> map = new HashMap<String,Object>();
            map.put("state", "上传失败");
    
            if (Objects.isNull(upfile)) { 
                return map;
            }
    
            String oldName = upfile.getOriginalFilename();
            String timeFileName = DateHelper.getDateStr(new Date());
    
            // 判断当前系统是否是Windows系统
            boolean system = isWindowsSystem();
            String fileName = system ? FileUtils.upLoadFile(upfile,"F:/upload/admin/article/" + timeFileName)
                    : FileUtils.upLoadFile(upfile,imgUrl + "/" + timeFileName);
            if (StringUtils.isNotBlank(fileName)) { 
                map.put("state", "SUCCESS");
                // 图片url 浏览器不能直接访问项目外目录的图片等文件，需要做虚拟路径映射
                // 这个路径的是在配置类里指定的映射到本地的绝对路径
                if(system){ 
                    map.put("url", "/upload/admin/article/" + timeFileName + "/" + fileName);
                } else { 
                    map.put("url", hostUrl + mappingUrl + "/" + timeFileName + "/" + fileName);
                }
                //图片名称，这个会显示在输入框里
                map.put("title", fileName);
                //图片原名称
                map.put("original", oldName);
                //文件类型 .+后缀名
                map.put("type", fileName.substring(fileName.lastIndexOf(".")));
                //文件大小（字节数）
                map.put("size", upfile.getSize());
            }
            log.info("map：{}", map);
            return map;
        }
    
        /** * 判断当前系统是否是Windows系统 * @return true：Windows系统，false：Linux系统 */
        private boolean isWindowsSystem(){ 
            String property = System.getProperty("os.name").toLowerCase();
            return property.contains("windows");
        }

*  hostUrl：http://127.0.0.1:8090/
 *  imgUrl：/upload/admin/article/（保存路径）
 *  mappingUrl：upload/admin/article/（映射路径）

--------------------

映射方法：

/** * 文件URL映射 */
    @Component
    public class WebConfigurer extends WebMvcConfigurerAdapter { 
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) { 
    		registry.addResourceHandler("/upload/admin/article/**")
    				.addResourceLocations("file:///upload/admin/article/");
        }
    
    }

--------------------

使用本地路径的时候：““F:/upload/admin/article/””， `config.json` 中的文件路径配置为：  
config.json：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 10]

注意：imageUrlPrefix前缀记得带上，不然图片会出现上传成功，但是显示图片不出来  
如：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 11]

###### 这里还有一个问题，就是我部署到线上后，发现上传图片还是不行，后期已经将上传图片的方法改为上传到OSS，这个问题目前还未找到解决方法，但有一个思路：应该是跟前面讲到的文件映射有关，或者我们将文件的路径映射到服务器的文件夹下 ######

--------------------

### 5.注释多图上传里面的其他按钮 ###

找到对应的路径：`ueditor/dialogs/image/image.html` 注释掉代码即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 12]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 13]

--------------------

### 6.百度编辑器部分功能无法使用 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 14]

在 `ueditor/ueditor.config.js`中的设置如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 15]

结果：  
![在这里插入图片描述][20200902154048990.png_pic_center]

### 7.保存成功后无法正常显示文字和图片，或显示为空白，解决方法 ###

html：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 16]

在回显的时候使用以下方法即可：

// content 即为我们在ueditor添加的内容 
    UE.getEditor('ueditorContent').execCommand('insertHtml', content);

--------------------

### 8.部署到服务器又出现了加载不到config.json文件（这就很难受了） ###

![在这里插入图片描述][20200829171550154.png_pic_center]  
服务器上是jar包，又没法代码调试，很无奈。

只能改代码，将`config.json`放到linux上的目录下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 17]

--------------------

##### UEditor 填坑参考网址：[ https://www.jianshu.com/p/5d4d15e558b7 ][https_www.jianshu.com_p_5d4d15e558b7]. #####

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ba772e6ff81c4655a94c642cfaf8d2c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/46afb518035e4711bc4f92624f323f2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/6621fd3dba744bcb93f4ca893adb829b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/2321d281406e4a37b37d6efb69f8e441.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/3fe4573f46d54a1da11eeacda88af5b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/f63c654eb9ae439dab7058eca10a6482.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/3ea365585e1c40d0a7fb90e50ff862b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/58b105ac82704ec5b7d61c80e5f0d90f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/0a90ac7c24b345bb9066bf4638917716.png
[20200829151110481.png_pic_center]: /images/20221123/1b143cbaaf644441829b8b72115baef2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/6db35b597d414929b86d44e714c4d335.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/4973acd099a14be5b629f1c27831856b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/9fd5079c42d24b39b48660872a6beece.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/cc34bf0b9794488ca048c04c44c0a50b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/7d7aa36709e447cebe200b6a64f2af4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221123/906e9a99853f48d2a3ffadc12ba549cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221123/1088c90872c2414d8669fdf52f6d4734.png
[20200902154048990.png_pic_center]: /images/20221123/6ebc280b85e5476dbde3354891d30cf9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221123/fcf3477b58f44db9bfe8620c5662350e.png
[20200829171550154.png_pic_center]: /images/20221123/9984df5fe71447f7a71684fc2dae050b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MTEyNTIz_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20221123/9c5aac37da024508867a85bcfa14cfce.png
[https_www.jianshu.com_p_5d4d15e558b7]: https://www.jianshu.com/p/5d4d15e558b7