若依项目整合百度(Ueditor)富文本编辑器

若依项目整合百度(Ueditor)富文本编辑器

最近项中有用到富文本编辑器，若依自带的功能太过简单，闲来无事整合了百度的富文本编辑器，一路踩坑终是成功了（呜呼······

UEditor文档:http://fex.baidu.com/ueditor/

点击演示可以下载源码，有兴趣的小伙伴可以下载下来研究一下。这里就直接下载发布过的版本啦

下载地址：https://github.com/fex-team/ueditor/releases/tag/v1.4.3.3

• 下载支持文件

下载之后的文件解压，改个名字，作者这里就随大众改了UEditor

• 将文件复制到你的项目中的public 文件下，你的有可能是static ，然后项目结构就变成了这个样子
  
• 为了方便使用我们来写个组件吧，这里名字就叫EditorBaidu了

index.vue代码

记得安装插件vue-ueditor-wrap

npm i vue-ueditor-wrap

• 写个测试页面吧

这样就可以看到编辑框了，当然还不完善，试下图片上传就出错啦，接下来写一下接口吧

在组件中我们配置的上传路径是/ueditor，当然接口也要一致了，Java端建个UEditorController，UEditorConfig.json文件放在项目的resources文件夹下。内容从 UEditor/jsp/config.json 下复制

@RestController
@RequestMapping("/ueditor")
public class TextController extends BaseController {

	@Anonymous
    @GetMapping
    public String getConfig() {
        String text = ResourceUtil.readUtf8Str("UEditorConfig.json");
        return text;
    }

    @PostMapping
    public JSONObject upload(String action, MultipartFile upfile) throws IOException {
        LoginUser loginUser = getLoginUser();//验证登录

        JSONObject json = new JSONObject();
        // 上传文件路径
        String filePath = RuoYiConfig.getUploadPath();
        // 上传并返回新文件名称
        String fileName = FileUploadUtils.upload(filePath, upfile);
//            String url = serverConfig.getUrl() + fileName;
        json.set("state", "SUCCESS");
        json.set("url", fileName);
        json.set("original", upfile.getOriginalFilename());
        if (action.equals("uploadimage")) {
            json.set("title", "图片文件");
        } else if (action.equals("uploadvideo")) {
            json.set("title", "视频文件");
        } else {
            json.set("title", "文件");
        }
        return json;
    }
}

这个上传文件和获取配置写成了两个接口，当然你也可以写一起，获取配置用的get请求，上传用的post请求

这个时候测试会发现还是报错。可能获取配置的接口显示 请求访问：/ueditor，认证失败，无法访问系统资源
这里有两种解决方案，第一种在java端SecurityConfig 文件中开放/ueditor 接口不权鉴验证，

第二种在get请求时加上Authorization权鉴信息，需要改一下ueditor.all.js 文件，大概在8251行，记得改完将文件名改成ueditor.all.min，把原来的ueditor.all.min 文件删掉

if (method == "POST") {
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(submitStr);
        } else {
            var list = window.document.cookie.split(";")
            let filterList = list.filter(item =>{
                return item.substring(1,12) === "Admin-Token";
            })
            var token = filterList[0].substr(13);
            xhr.setRequestHeader("Authorization", token);
            xhr.send(null);
        }

可以上传之后完善一下测试页面吧

点击保存就可以获取到富文本内容了

之后发现图片上传时候图片太大会出现滚动条不太美观，加了个图片最大宽度的设置，在UEditor/themes/iframe.css 加入自定义样式

img{
  max-width: 100%; /* 图片自适应宽度 */
}

避坑指南1
上传之后图片（文件）不显示访问不到，前端设置了接口前缀， 没有设置图片访问前缀，这个可以在Java配置文件UEditorConfig.json中设置也可以在前端初始化编辑器时设置，如果在前端设置了，Java端要删掉才管用