Kindeditor是一款功能强大的开源在线HTML编辑器，支持所见即所得的编辑效果。它使用JavaScript编写，可以无缝地与多个不同的语言环境进行集成，如.NET、PHP、ASP、Java等。官方网站可以查看这里：
Kindeditor本身提供了许多非常实用的插件，由于代码开源，开发人员可以根据需要对其进行任意扩展和修改。
在使用Kindeditor编辑网站内容时考虑这样一个场景：编辑人员往往会从其它页面或者Word文档将内容复制到Kindeditor编辑器中，而不会从一张白纸开始编写内容。如果所复制的内容中包含图片，则需要首先将图片从源地址下载到本地，然后将其上传到本网站所在的服务器，否则图片仍然会指向你所复制的页面或者文档，这会导致图片可能在页面中无法正确打开。编辑人员往往要处理许多的文档，这样的操作无疑非常繁琐。能否让Kindeditor自动识别粘贴到其中的内容，并将图片自动上传到服务器呢？下面的代码实现了这一功能。
有关如何在页面中使用Kindeditor可以去查看官方网站的文档，这里不再详细介绍。
实现该功能的基本思路：在Kindeditor编辑器的keyup事件中添加代码，以检查编辑器的内容中是否包含图片；找出需要自动上传到服务器的图片，通过Ajax方式调用图片上传程序将图片上传到服务器；在Ajax的回调函数中将对应图片的src地址修改为本地相对地址。
该功能不支持将Word中的图片复制出来并上传到服务器。
上图是最终实现效果。程序会自动识别编辑器中的内容，如果有图片需要上传，则会在编辑器的顶部显示一条提示信息。用户点击“上传”链接，程序会通过Ajax请求调用图片上传程序，并在回调函数中将对应图片的src地址修改为本地相对地址。
具体实现步骤及相关代码：
1. Kindeditor编辑器修改
找到kindeditor.js文件，在keyup()事件中添加自定义代码。不同版本的Kindeditor所提供的代码差别可能会比较大，需要借助于官方文档进行查找。本文基于Kindeditor 4.1.10版本。
2. auto.js文件代码
function df() { var haspicContainer = document.getElementById("has_pic"); if (haspicContainer == null) { haspicContainer = document.createElement("div"); haspicContainer.id = "has_pic"; haspicContainer.innerHTML = "<input type='text' value=''/><div><b>您有图片需要上传到服务器</b> <a href='javascript:uploadpic();' >上传</a></div><div></div>"; $(".ke-toolbar").after(haspicContainer); } var img = $(".ke-edit-iframe").contents().find("img"); var piccount = 0; var sstr = ""; $(img).each(function (i) { var that = $(this); if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) { piccount++; if (i == $(img).length - 1) sstr += that.attr("src"); else sstr += that.attr("src") + "|"; } }); $("#piclist").val(sstr); document.getElementById("has_pic").style.display = (piccount > 0) ? "block" : "none"; } function closeupload() { $("#has_pic").hide(); $("#upload").show(); } function uploadpic() { var piclist = encodeURI($("#piclist").val()); if (piclist.length == 0) return false; $.ajax({ url: "asp.net/uploadpic.ashx", data: "pic=" + piclist, type: "GET", beforeSend: function () { $("#upload").hide(); $("#confirm").text("正在上传中..."); }, success: function (msg) { if (msg !== "") { var str = new Array(); str = msg.split('|'); var img = $(".ke-edit-iframe").contents().find("img"); $(img).each(function (i) { var that = $(this); if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) { that.attr("src", "/uploads/image/" + str[i]); that.attr("data-ke-src", "/uploads/image/" + str[i]); } }); $("#confirm").html(img.length + "张图片已经上传成功！ <a href='javascript:closeupload();'>关闭</a>"); } else $("#confirm").text("上传失败！"); } }); }
其中的$(".ke-edit-iframe").contents().find("img")用来查找编辑器内容中的所有图片。默认情况下，编辑器的内容被存放在iframe元素中，该iframe拥有class="ke-edit-iframe"的属性。程序会判断每个图片src属性的值中是否包含"http://"或者"https://"，从而确定该图片是远程图片还是本地图片。如果图片为远程图片，则通过jQuery的ajax方法调用uploadpic.ashx将图片上传到服务器。同时在回调函数中修改对应图片的src地址。
3. uploadpic.ashx文件代码