SpringBoot接入Ueditor编辑器

梦里梦外; 2022-04-18 02:15 290阅读 0赞

很多时候我们需要使用到富文本编辑器，这里我就分享一下SpringBoot接入百度的UEditor编辑器的方法；

##### 下载UEditor编辑器 #####

官网：[https://ueditor.baidu.com/website/index.html][https_ueditor.baidu.com_website_index.html]  
我们下载其中的 jsp utf-8版本  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70]

##### 编写API接口 #####

编辑器要从服务器处获取配置文件，并且在编辑器中加入图片，文件时，需要上传到服务器进行存储，所以我们要留出给ueditor使用的api；

@RestController
    @RequestMapping("/api/ueditor")
    public class UeditorController {
    
        /**
         * 获取Ueditor的配置文件
         * @return
         */
        @GetMapping("/config")
        public String getConfig() {
            return "{\n" +
                    "        \"imageActionName\": \"uploadimage\",\n" +
                    "            \"imageFieldName\": \"file\",\n" +
                    "            \"imageMaxSize\": 2048000,\n" +
                    "            \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
                    "        \"imageCompressEnable\": true,\n" +
                    "            \"imageCompressBorder\": 1600,\n" +
                    "            \"imageInsertAlign\": \"none\",\n" +
                    "            \"imageUrlPrefix\": \"\",\n" +
                    "            \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
                    "\n" +
                    "        /* 上传文件配置 */\n" +
                    "        \"fileActionName\": \"uploadfile\",\n" +
                    "            \"fileFieldName\": \"file\",\n" +
                    "            \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
                    "            \"fileUrlPrefix\": \"\",\n" +
                    "            \"fileMaxSize\": 51200000,\n" +
                    "            \"fileAllowFiles\": [\n" +
                    "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
                    "                \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
                    "                \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
                    "                \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
                    "                \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"]\n" +
                    "    }";
        }
    
        /**
         * Ueditor上传文件
         * 这里以上传图片为例，图片上传后，imgPath将存储图片的保存路径，返回到编辑器中做展示
         * @param file
         * @return
         */
        @PostMapping("/upload")
        public String upload(@RequestParam("file") MultipartFile file) {
            String result = "";
            if(!file.isEmpty()) {
                String originalFileName = file.getOriginalFilename();
    
                // 这里写你的文件上传逻辑
                // String imgPath = fileUtil.uploadImg(file);
                
                String imgPath = "";
                result = "{\n" +
                        "    \"state\": \"SUCCESS\",\n" +
                        "    \"url\": \"" + imgPath + "\",\n" +
                        "    \"title\": \"" + originalFileName + "\",\n" +
                        "    \"original\": \"" + originalFileName + "\"\n" +
                        "}";
            }
            return result;
        }
    
    
    }

##### 配置UEditor编辑器 #####

将下载的编辑器解压，放到项目的/resources/static/目录下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70 1]  
编辑其中的ueditor.config.js文件，我们可以通过这个文件对编辑器进行大量的配置  
在这里，我们主要修改这个地方  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70 2]  
将

, serverUrl: URL + "jsp/controller.jsp"

替换为我们自己写的api接口，让编辑器获取配置文件，如：

, serverUrl: "/api/ueditor/config"

在这个配置文件中，我们还可以进行许多其他的配置，比如设置编辑器的宽度，高度，是否自适应高度等，大家可以自己查看和尝试。

##### 接入UEditor编辑器 #####

在上面的步骤中，我们已经将编辑器配置完成了，现在只需要接入到我们的页面中就行了。示例如下：

<html>
        <head>
            <title>富文本编辑器</title>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        </head>
        <body>
        	
            <div>
                <script id="container" type="text/plain">这里写你的初始化内容</script>
            </div>
            
            <script src="/ueditor/ueditor.config.js" type="text/javascript"></script>
            <script src="/ueditor/ueditor.all.js" type="text/javascript"></script>
            <script type="text/javascript">
                var ueditor = UE.getEditor('container', {
                    initialFrameWidth : 1190,       // 设置初始时的宽度
                    initialFrameHeight: 500         // 设置初始时的高度
                });
                UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
                UE.Editor.prototype.getActionUrl = function(action) {
                    // 如果触发了下面三个动作中，则进行文件上传操作
                    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
                        return '/api/ueditor/upload';
                    } else {
                        return this._bkGetActionUrl.call(this, action);
                    }
                }
            </script>
        </body>
    </html>

至此，编辑器已经接入成功了！  
效果如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70 3]

##### 参考文档 #####

1.  [UEditor官方文档][UEditor]
2.  [jsp使用说明][jsp]
3.  [后端请求规范][Link 1]

[https_ueditor.baidu.com_website_index.html]: https://ueditor.baidu.com/website/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70]: /images/20220418/92b2874e41044d23803be3ec8346613d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70 1]: /images/20220418/5f2c13be09b3421e894b7dbe883c7e7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70 2]: /images/20220418/bd4c3cf73a794847b42f3ee2665624ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70 3]: /images/20220418/7724f98d19d147d8bd854174135537a0.png
[UEditor]: http://fex.baidu.com/ueditor/
[jsp]: http://fex.baidu.com/ueditor/#server-jsp
[Link 1]: http://fex.baidu.com/ueditor/#dev-request_specification