SpringBoot整合UEditor小记

1,120 阅读4分钟

SpringBoot整合UEditor小记

由于项目需要更换富文本编辑器,找了几个开源的感觉功能都太简单了,另外还有就是发现原来用的富文本编辑器,段落和首行缩进,效果不好,到前端页面展示不出来缩进效果。

于是打算更换富文本编辑器,在搜了之后,最后选用了UEditor,这里简单记录下自己踩过的坑。

image.png

ueditor 官网:ueditor.baidu.com

ueditor API 文档:ueditor.baidu.com/doc

ueditor github 地址:github.com/fex-team/ue…

我这里直接用的同事发我的压缩包,没有看出来是什么版本的。

如果不介意版本的话,压缩包自取:链接: pan.baidu.com/s/1LYMpDjC9… 提取码: afix

解压之后,直接放到项目的static/js文件夹下了:

image.png

这里需要注意一点,由于页面引用的时候,只引入了Ueditor的js,其中要用到的css可能会自动引入,这里需要保证静态资源不能被后端拦截到。

首先是先把页面整出来,直接将压缩包里面的index.html直接完整copy到我们自己的页面里面也可以。这时页面显示应该没问题。

image.png

这时可以测试下,获取编辑框里面的内容什么的,基本都是正常的,但是图片插入这个最基本的功能,就有点问题了。

打开控制台,可以看到这样一个异常:后台配置项返回格式出错,上传功能将不能正常使用!

image.png

这个就很烦了。。。。

然后搜了之后,发现没有一篇能够顺利解决我的问题的。

由于用的Springboot,我看官方文档里面由于停更时间过长,导致demo之后jsp相关的,并不能解决我的问题。

里面提到需要引入几个基础的jar包,我看了下当前项目中都包含了,如果没有的话,建议加上,避免出现不该出现的问题。

image.png

这几个比较基础的jar包,项目里面应该有了,我这里用的版本都比这个新,版本应该问题不大。

在我解决这个富文本编辑器后,大概想了下,主要的问题就是该富文本编辑器里面默认了上传图片(文件)的接口了,并且上传文件的配置文件不是传统的在某个js里面,它走的是前后台交互的这种模式。

为什么这么说呢,如果用的jsp作为页面的话,需要配置放开一个接口,也就是这个接口返回的应该是jsp\controller.jsp页面。

可见:ueditor.config.js 中的

image.png

这里我给改成自定义的接口了:/ueditor/config了,该接口返回的应该是一个json字符串,内容应该就是压缩包里面的 jsp文件夹下面的 config.json 里面的内容。在页面加载完成后,会自动调用这个接口。

并且此接口,还需要后端给放开,不能拦截,由于我后端用了shiro作为鉴权,这里直接给配置放开了。因为实在没找到怎么在这个接口里面也加上token参数。

后盾接口代码如下:


/**
 * 此文件接口为配合 Ueditor 所用, 目前仅适配图片上传功能
 *      接口名称固定
 *      接口返回信息固定
 * @Auther linmengmeng
 * @Date 2021-08-03 14:55
 */
@Slf4j
@RestController
@RequestMapping("/ueditor")
@Module("ueditor")
@Api(value = "ueditor富文本编辑器API", tags = {"ueditor富文本编辑器"})
public class UeditorController {

    @Autowired
    private UploadFileService uploadFileService;

    /**
     * 上传配置:即不走config.json,模拟config.json里的内容,解决后端配置项不正确,无法上传的问题
     *     如果需要配置上传其他文件,同理直接在返回参数中新增 config.json 中的内容
     * @return
     */
    @RequestMapping("/config")
    public Map<String, Object> uploadConfig() {
        Map<String, Object> map = new HashMap<>();
        List<String> imageAllowFilesList = new ArrayList<>();
        imageAllowFilesList.add(".png");
        imageAllowFilesList.add(".jpg");
        imageAllowFilesList.add(".jpeg");
        imageAllowFilesList.add(".gif");
        imageAllowFilesList.add(".bmp");
        map.put("imageActionName", "uploadimage");
        map.put("imageFieldName", "file");
        map.put("imageMaxSize", 2048000);
        map.put("imageAllowFiles", imageAllowFilesList);
        map.put("imageCompressEnable", true);
        map.put("imageInsertAlign", 1600);
        map.put("imageCompressBorder", "none");
        map.put("imageUrlPrefix", "");
        map.put("imagePathFormat", "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}");
        return map;
    }


    @PostMapping("/upload")
    public Map<String, String> uploadFile(MultipartFile file) throws Exception {
        log.info("name:{}", file.getName());
        log.info("size:{}", file.getSize());
        log.info("getOriginalFilename:{}", file.getOriginalFilename());
        UploadFileParam uploadFileParam = new UploadFileParam();
        uploadFileParam.setUploadType(ConstEnum.UploadFileFolderEnum.COMMON_EDITOR.getFileType());
        String uploadPath = uploadFileService.saveUploadFile(file, uploadFileParam, true);

        String newFilename = uploadPath.substring(uploadPath.lastIndexOf("/"));

        Map<String, String> map = new HashMap<>();
        map.put("state", "SUCCESS");
        map.put("url", uploadPath);
        map.put("title", newFilename);
        map.put("original", newFilename);

        return map;
    }

}

进入当前页面,会自动调用此接口,返回信息如下:

image.png

这样,第一个问题就解决了,此时控制台应该不会出现异常信息了。

但是新的问题又出来了,上传图片失败,富文本框里面只有一个圆圈在转,图片回显不了,后台也接受不到图片上传接口的请求。

这就需要在页面里面新增自定义上传图片的配置了。


//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');

ue.ready(function () {
    // ue.setContent('');//设置富文本编辑器初始化数据
    ue.execCommand('serverparam', function(editor) {
        return {
            'token': token //设置富文本编辑器请求时,携带的额外参数
        };
    });
});

// 自定义 Ueditor 的图片上传
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

UE.Editor.prototype.getActionUrl = function(action) {
    console.log("action", action);
    if (action == 'uploadimage'){
        console.log("---------uploadimage--------");
        return '/ueditor/upload'; /* 你自己的图片上传action */
    }else{
        return this._bkGetActionUrl.call(this, action);
    }
};

加上上面这段代码,就可以上传图片就会正常走到我们后台的接口里面了,这里是Ueditor支持的自定义图片上传接口配置。

这里有几个点需要注意。

第一:action == 'uploadimage'这个uploadimage对应我们上面config接口里面返回的 imageActionName的值,也就是uploadimage

第二:如果后端有鉴权机制,这里还需要携带额外的参数,比如token,上面在富文本编辑器加载成功后,配置了接口交互的参数token。

第三:图片回显问题。

这个就是依赖我们的上传图片的接口了,上传图片接口返回的json内容有特殊的要求的。上面接口是我自定义的公共文件上传接口,跟富文本编辑器关系不大,只要保证图片确实正常传到我们的后端了,然后接口回显的json内容符合即可。

其中 "state"的值必须为 "SUCCESS"否则,识别不了上传成功。

url 是完整的图片回显地址,这个可以单独测试下,回显的地址,在我们的浏览器里面肯定是正常可以访问到的,否则图片是显示不出来的。

另外两个参数:titleoriginal,是html标签里面用到的。

看下效果:

image.png

然后使用富文本编辑器自带的查看HTML源码功能,看下源码:

<p style="text-indent: 2em;">
    <span style="font-family: 宋体; font-size: x-large; font-weight: bold;"></span>
</p>
<p>
    <span style="font-size: x-large; text-indent: 24pt; line-height: 150%; font-family: 仿宋;"><img src="http://127.0.0.1:8088//resource/common_editor\202108031921230291548.gif" title="/common_editor\202108031921230291548.gif" alt="/common_editor\202108031921230291548.gif"/></span>
</p>
<p>
    <br/>
</p>

到这里,就算搞定了富文本编辑器的图片上传,小小问题,折腾了大半天了。。。。。。。。。

想到昨天看的抖音上面一个小孩的梗:成绩好就讲我是世界最棒,成绩不好就讲我是邋遢东西

到我这里就是:问题解决了就讲我是小小问题,问题没解决的时候,感觉自己啥也不是。。。。。。。

参考博客:blog.csdn.net/qq_36737803…