SpringBoot接入Ueditor编辑器

最新推荐文章于 2024-03-31 03:01:48 发布

占位符号

最新推荐文章于 2024-03-31 03:01:48 发布

阅读量4.4k

点赞数 1

分类专栏： SpringBoot Spring 文章标签： SpringBoot Ueditor 富文本编辑器

本文链接：https://blog.youkuaiyun.com/zai_xia/article/details/83818223

版权

Spring 同时被 2 个专栏收录

12 篇文章

订阅专栏

SpringBoot

8 篇文章

订阅专栏

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

下载UEditor编辑器

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

编写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/目录下
在这里插入图片描述
编辑其中的ueditor.config.js文件，我们可以通过这个文件对编辑器进行大量的配置
在这里，我们主要修改这个地方

将

, 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>

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