vue使用kindeditor富文本编辑器上传图片时跨域解决

当我们使用kindeditor富文本编辑器的时候会出现iframe跨域问题

可以通过重定向来解决

第一步：先在项目中创建一个redirect的vue组件

<template>
      <div class="redirect">

      </div>
</template>

<script>
    export default {
        name: "redirect",
      data(){
          return{
            dataObjectUrl:''
          }
      },
      created(){
          this.upload_callback();
      },
      methods:{
        getParameter() {
          // 获取到重定向发送过来的信息
          var uri = decodeURI(window.location.search);
          //有%3A之类的乱码，需要用正则处理一下
          uri = uri.replace(/%3A/g, ":").replace(/%2F/g, "/").replace(/%3F/g, "?").replace(/%3D/g, "=").replace(/%26/g, "&");
          //具体对数据的处理，看后台传过来的类型，最后得到一个json就可以，其中有两个属性，成功的时候，一个error,一个url
          return uri.length > 5 ? JSON.parse(uri.substring(3)) : null
        },
        upload_callback() {
          var obj = this.getParameter();
          var dataObject;
          // 当error为0的时候，说明上传成功
          if(obj.error == 0){
            dataObject = {"error": obj.error, "url": obj.url};
          }else{
            dataObject = {"error": 1, "message": "错误信息"};
          }
          var data =  JSON.stringify(dataObject)
          //这里是对数据处理之后，走完这个js会回到kindeditor的js中，继续执行，注意如果后台返回了url,但是弹窗提醒是undef，
          // 可能是因为，自己这边传递接受的error的值不是number类型
          // ，为kindeditor源码里面对error的值的判断都是用的全等，值和类型都相等的情况
          document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data + '</pre>';
        },
      }
    }
</script>

<style scoped>

</style>

调用kindeditor的代码

 <editor ref="editor" id="editor_id" height="300px" width="100%" :content.sync="editorText"
                :afterChange="afterChange()"
              cssPath ='../../static/kindeditor/plugins/code/prettify.css'
              uploadJson="http://192.168.100.157:8080/fileUpload"
              :loadStyleMode="true"
              :allowFileManager="true"
              @on-content-change="onContentChange"></editor>

接下来就是后台需要配合，发起上传请求的时候，重定向到我们前端的redirect文件就可以，后台配合请参考https://my.oschina.net/u/3774949/blog/3111248

可以参考一下这位好心人的  https://www.jianshu.com/p/27e9ed4e7ff8