最近在项目中引入kindEditor富文本，遇到一些问题，通过强大的百度和自己的琢磨，终于解决了，在此做个小笔记。
1、问题一：实例化失败。
把所有插件的文件都引入项目了，加载也没问题，按照文档指引写了实例化代码，但是还是实例化失败，只出现一个无图框框。
把代码改成：
// 手动实例化 function kindEditor(id) { scope.editor = KindEditor.create(id, { width: '100%', height: '200px', uploadJson: globalConstant.sdatt_apiPath + 'file/upload', items : [ 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'insertfile', 'table', 'hr', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|' ] // 在这里可以删除不需要的功能 }) } kindEditor('#editor_id')2、问题二： 上传图片请求头携带token
我正在做的项目，后端会对前端的请求进行拦截验证token。但是kendEditor的图片上传并没有请求头的配置。kindEditor直接通过form上传图片，如果要在form的请求的请求头设置token，需要引入相关的插件，有点麻烦。研究了一下，决定修改kindEditor的源代码。
要修改的文件是kindeditor.js，大概的位置在7277行，全文搜索“KindEditor.plugin('image', function(K) {”
找到这个方法
var dialog = self.createDialog({ name : name, width : dialogWidth, height : dialogHeight, title : self.lang(name), body : html, yesBtn : { name : self.lang('yes'), click: function (e) { // 修改这里的代码 } })因为图片上传分为本地上传和网络图片上传，本地上传和网络上传是共用一个方法的，我要修改的是本地上传的代码，所以通过要通过判断让本地上传走我的代码。判断条件是tabs.selectedIndex === 1，为1时是本地上传，为0时是网络上传。具体代码修改如下所示：
click : function(e) { if (dialog.isLoading) { return; } // 网络图片上传 if (tabs.selectedIndex === 0) { if (showLocal && showRemote && tabs && tabs.selectedIndex === 1 || !showRemote) { if (uploadbutton.fileBox.val() == '') { alert(self.lang('pleaseSelectFile')); return; } dialog.showLoading(self.lang('uploadLoading')); uploadbutton.submit(); localUrlBox.val(''); return; } var url = K.trim(urlBox.val()), width = widthBox.val(), height = heightBox.val(), title = titleBox.val(), align = ''; alignBox.each(function() { if (this.checked) { align = this.value; return false; } }); if (url == 'http://' || K.invalidUrl(url)) { alert(self.lang('invalidUrl')); urlBox[0].focus(); return; } if (!/^\d*$/.test(width)) { alert(self.lang('invalidWidth')); widthBox[0].focus(); return; } if (!/^\d*$/.test(height)) { alert(self.lang('invalidHeight')); heightBox[0].focus(); return; } } // 本地图片上传 if (tabs.selectedIndex === 1) { // 此处的代码具体看下面两种实现方式 } clickFn.call(self, url, title, width, height, 0, align); }方法一： 使用jQuery
var formData = new FormData(); formData.append('file', file[0].files[0]); dialog.showLoading(self.lang('uploadLoading')); $.ajax({ url: "file/upload", // 文件上传地址 type: 'POST', cache: false, data: formData, processData: false, contentType: false, dataType: "json", beforeSend: function (request) { request.setRequestHeader("token", '此处放token'); }, success: function (data) { console.log(data); uploading = false; url = data.img_url; // 此处是上传成功之后后端返回的图片地址 var img = new Image(); img.src = url; // 获取图片的宽高 img.onload = function () { clickFn.call(self, url, '图片的名字', img.width + 'px', img.height + 'px', 0, 'center'); } setTimeout(function () { self.hideDialog().focus(); }, 0); dialog.isLoading = false; }, error: function (data) { alert(data.error); } });
方法二：原生JS
var formData = new FormData(); formData.append('file', file[0].files[0]); dialog.showLoading(self.lang('uploadLoading')); var xhr = new XMLHttpRequest(); var url = "/file/upload"; // 文件上传的地址 xhr.open('POST', url, true); // 设置token xhr.setRequestHeader('x-auth-token', localStorage.token); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { var res = JSON.parse(xhr.responseText); data = res.data; uploading = false; var srcUrl = data.img_url; var img = new Image(); img.src = srcUrl; img.onload = function () { clickFn.call(self, srcUrl, '图片的名字', img.width + 'px', img.height + 'px', 0, 'center'); } setTimeout(function () { self.hideDialog().focus(); }, 0); dialog.isLoading = false; } } xhr.send(formData);
