vue+springboot前后端分离集成ueditor，避坑之

1.前端vue搭建

首先不管vue-cli 2.0还是vue-cli 3.0你得会新建一个vue脚手架项目，让它能够正常运行起来

2.集成vue组件

npm i vue-ueditor-wrap -D 先安装一下 vue-ueditor-wrap 插件，我没试过不安装会是什么效果，估计会导致没法调用组件吧，可以理解为安装驱动包。

不管你从网上或者官方源码，你得获取一个ueditor的开发源码包，像下图这样的结构，vue-cli 2.0可以将ueditor文件夹放到static文件夹下，vue-cli 3.0可以将ueditor文件夹放到public文件夹下

image.png

App.vue代码

  <div id="app">
    <vue-ueditor-wrap v-model="msg" :config="myConfig" ref="myueditor"  @ready="ready"></vue-ueditor-wrap>
    <div @click="getContent">获取编辑器内容</div>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  name: 'App',
  components: {
    VueUeditorWrap
  },
  data(){
    return{
      msg: '437476',
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口（文件上传功能搭建的后端接口）
        serverUrl: 'http://localhost:8084/live/editor/config',
        // UEDITOR_HOME_URL: process.env.BASE_URL + 'UEditor/' 
        //项目内部相对路径 可以找到我们引入的ueditor文件夹下的资源 
        UEDITOR_HOME_URL:'/UEditor/'
      },
      editorInstance: null
    }
  },
  methods:{
    ready(editorInstance) {
      console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
      this.editorInstance = editorInstance
    },
    getContent() {
      console.log(this.msg)
      console.log(this.$refs.myueditor)
    }
  }
}
</script>

这是我们就可以访问运行起来的vue项目，但是前提是你把serverUrl：这个接口能返回config.json数据

image.png

注意： 由于集成ueditor需要加载一个config.json的配置文件，里面定义了一些功能配置项，必须先获取里面的json，我们才能正常使用富文本的功能，不然上传单张图片图标会被置灰，还有上传多张图片功能也不能使用，显示“没有配置后台数据、、、、”，所有前端所有请求只会通过 serverUrl: 'http://localhost:8084/live/editor/config'这个接口发起，根据参数来区分各个功能。

3.后端

@RestController
@CrossOrigin
@RequestMapping("/live/editor")
public class LiveEditorController {


    @RequestMapping(value="/config")
    @ResponseBody
    public String ueditorGet(@RequestParam Map<String, Object> params) {
        String callback = (String) params.get("callback");
        System.out.println(callback);
        return callback + "(" + UEditorConfig.UEDITOR_CONFIG + ")";
//        return UEditorConfig.UEDITOR_CONFIG;
    }
    @PostMapping("/config")
    @ResponseBody
    public Map<String, Object> ueditorPost(@RequestParam Map<String, Object> params, @RequestParam("upfile") MultipartFile file) {
        String name = (String) params.get("name");
        String type = (String) params.get("type");
        String size = (String) params.get("size");

        String fileName = "";
        if (!file.isEmpty()) {
            //返回的是字节长度,1M=1024k=1048576字节 也就是if(fileSize<5*1048576)
            if (file.getSize() > (1048576 * 5)) {
                log.error("文件大小不能超过5M");
            }
            //判断文件是否有后缀
            String suffix = Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf("."));
            if (StringUtils.isBlank(suffix)) {
                log.error("上传文件没有后缀，无法识别");
            }

        } else {
            log.error("上传失败");
        }

        return serviceInterface.imgUpload(file);

    }

}


    @Override
    public Map<String, Object> imgUpload(MultipartFile upFile) {
        Map<String, Object> rs = new HashMap<String, Object>();
        String originalFileName = "";
        try {
            if (!upFile.isEmpty()) {
                originalFileName = upFile.getOriginalFilename();
                String fileUrl =imgOssService.uploadFile(upFile.getBytes(),originalFileName);
                System.out.println(fileUrl);
                rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
                rs.put("url", fileUrl); // 能访问到你现在图片的路径
                rs.put("title", originalFileName);
                rs.put("original", originalFileName);

            }
        } catch (Exception e) {
            e.printStackTrace();
            rs.put("state", e.getMessage());
            rs.put("url", "");
            rs.put("title", "");
            rs.put("original", "");
        }
        return rs;
    }

3.避坑

3.1 单张图片可以上传到服务器但是会提示“上传出错”
解决办法：修改ueditor.all.min.js源码检索到指定位置注释源码后加入以下代码， 由于项目会自动引用ueditor.all.min.js， 所以我将ueditor.all.js修改后直接粘贴覆盖到ueditor.all.min.js 中，问题解决。（参考：https://blog.csdn.net/csdn_shenguang/article/details/89026174?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase）

                    // domUtils.on(iframe, 'load', callback);
                    // form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params);
                    // form.submit();
                    var formdata = new FormData(form);
                    var arr,reg=new RegExp("(^| )_token=([^;]*)(;|$)");

                    var myForm = document.getElementById("myForm");
                    var xhr= new XMLHttpRequest();
                    xhr.open("POST", me.getOpt('serverUrl')+'?action=uploadimage', true);
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4)
                            if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)
                                alert(xhr.responseText);
                    }
                    xhr.send(formdata);

                    xhr.onreadystatechange = function () {
                        if(xhr.readyState == 4) {
                            var response = JSON.parse(xhr.responseText);
                            if(response.state=='SUCCESS' ){
                                loader = me.document.getElementById(loadingId);
                                loader.setAttribute('src', response.url);
                                loader.setAttribute('_src', response.url);
                                loader.setAttribute('title', response.title || '');
                                loader.setAttribute('alt', response.original || '');
                                loader.removeAttribute('id');
                                domUtils.removeClasses(loader, 'loadingclass');
                            }
                        }
                    }

3.2 单张或者多张上传后不能回显到ueditor编辑器内
原因分析：可能是由于前后端分离跨域导致的，也就是访问图片资源时它前面自动加了前端项目的域名，我本地项目那么它就加localhost:8080/,如果部署到服务器那就加服务器域名，导致无法访问到图片资源

image.png

问题解决：这个问题搞了好久，但是解决起来很简单，是由于浏览器在访问服务器资源时如果请求连接不是以http, https, ftp...等开头的，都会被识别为相对路径，跳转时会被加上http://域名/(项目名/)，所以我们在返回图片路径是给他拼接一个http://的开头即可。

image.png

插入视频修改

image.png

上传附件中文乱码
var iframedoc = (iframe.contentDocument || iframe.contentWindow.document);
iframedoc.charset="gbk";

image.png