KindEditor中图片上传添加Token参数

问题由来

在使用KindEditor富文本编辑器上传图片时，后端要求在上传文件的同时，需要携带token参数，KindEditor默认没有配置token的地方，查看了一下源代码，发现KindEditor是使用表单的形式提交数据的，所以在源代码提交表单的时候，做一下修改，把token添加到表单中，然后一起提交到服务器，下面介绍修改方法。

 

KindEditor版本号：4.1.1

解决方法

首先我们找到没有压缩的源文件kindeditor.js，在大约4118行处，会有一个submit方法，我们在这个方法里面，做如下代码所示的修改：

submit: function () {
    var self = this,
    iframe = self.iframe;
    iframe.bind('load', function () {
       // 此处有代码，为节省篇章，故删除掉
    });
 
    // *****修改开始*****
    // 创建表单元素
    var inputElement = document.createElement('input');
 
    // 设置为text类型
    inputElement.type = "text";
 
    // 重要：设置name,这个name为后端接收参数时会用到，请注意和后端对应起来。
    inputElement.name = "Authorization";
 
    // 重要：从缓存中读取token，赋值到这个元素上面
    inputElement.value = sessionStorage.getItem("token");
 
    // 设置元素隐藏
    inputElement.setAttribute('hidden', true);
 
    // 把元素添加到表单中
    self.form[0].appendChild(inputElement);
 
    // *****修改结束*****
 
 
    // 提交表单
    self.form[0].submit();
    return self;
},

后端使用C#开发，以下为接收示例，必须从Form里面去读取，而不是从请求头，这是要注意的地方，因为我们前端是通过表单提交的。

// 接收参数
context.Request.Form["Authorization"]