Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果。它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET、PHP、ASP、Java等。官方网站可以查看这里:http://kindeditor.net/index.php

  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文件代码

functiondf() {var haspicContainer = document.getElementById("has_pic");if (haspicContainer == null) {
haspicContainer= document.createElement("div");
haspicContainer.id= "has_pic";
haspicContainer.innerHTML= "<input type='text' id='piclist' value='' style='display:none;'/><div id='upload'><b>您有图片需要上传到服务器</b>&nbsp;&nbsp;<a href='javascript:uploadpic();' >上传</a></div><div id='confirm'></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");elsesstr = that.attr("src")   "|";
}
});
$("#piclist").val(sstr);
document.getElementById("has_pic").style.display = (piccount > 0) ? "block" : "none";
}functioncloseupload() {
$("#has_pic").hide();
$("#upload").show();
}functionuploadpic() {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 = newArray();
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   "张图片已经上传成功!&nbsp;&nbsp;<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文件代码

public classuploadpic : IHttpHandler
{public voidProcessRequest(HttpContext context)
{
context.Response.ContentType= "text/plain";string pic = context.Request.QueryString["pic"];string[] arr = pic.Split('|');string sstr = "";
UpLoadIMG st= newUpLoadIMG();for (int i = 0; i < arr.Length; i  )
{if (arr[i].IndexOf("http://") >= 0 || arr[i].IndexOf("https://") >= 0)
{string std = st.SaveUrlPics(arr[i], "../../uploads/image/");if (std.Length > 0)
{if (i == arr.Length - 1)
sstr =std;elsesstr = std   "|";
}
}
}
context.Response.Write(sstr);
}public boolIsReusable
{get{return false;
}
}
}public classUpLoadIMG
{
public string SaveUrlPics(string imgurlAry, stringpath)
{string strHTML = "";string dirPath =HttpContext.Current.Server.MapPath(path);try{if (!Directory.Exists(dirPath))
{
Directory.CreateDirectory(dirPath);
}string ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);
dirPath = ymd   "/";if (!Directory.Exists(dirPath))
{
Directory.CreateDirectory(dirPath);
}string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo)   imgurlAry.Substring(imgurlAry.LastIndexOf("."));
WebClient wc= newWebClient();
wc.DownloadFile(imgurlAry, dirPath newFileName);
strHTML= ymd   "/"  newFileName;
}catch(Exception ex)
{//return ex.Message;
}returnstrHTML;
}
}

  远程图片通过WebClient方法下载到服务器的相对路径"/uploads/image/"中,并且会按照日期自动生成文件夹和对应的文件名。返回的结果中包含了以"|"分隔的所有图片的本地相对地址,在步骤2的auto.js文件的uploadpic()函数中,回调方法success获取到该值并进行解析,将地址赋值给对应图片的src属性。

  原文出处:kindeditor/ckeditor编辑器加 图片自动上传成功。本文中的代码做了适当调整和优化。

更多专业前端知识,请上 【猿2048】www.mk2048.com

为Kindeditor控件添加图片自动上传功能相关推荐

  1. android缩放组件,Android控件实现图片缩放功能

    1 简介 先来一张效果图 TIM图片.gif 上图中灰色的一块是ImageView控件,ImageView中的图片进行左右上下移动,以及双指缩放. 对于android控件的缩放移动,点这里----an ...

  2. iOS UI-UIScrollView控件实现图片缩放功能

    一.缩放 1.简单说明: 有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对其内容进行缩放处理.也就是说,要完成缩放功能的话,只需要将需要缩 ...

  3. MFC 按钮控件添加图片

    1.将准备好的BMP格式图片放入项目中的"res"文件夹中: 2.在项目"资源视图"的"Bitmap"文件夹上右击选择"添加资源& ...

  4. C# Winform的panel控件添加背景图片后窗体闪烁问题解决办法

    C# Winform的panel控件添加背景图片后窗体闪烁问题解决办法 参考文章: (1)C# Winform的panel控件添加背景图片后窗体闪烁问题解决办法 (2)https://www.cnbl ...

  5. (转载)VS2010/MFC编程入门之五十四(Ribbon界面开发:使用更多控件并为控件添加消息处理函数)...

    上一节中鸡啄米讲了为Ribbon Bar添加控件的方法.本节教程鸡啄米将继续完善前面的实例,讲解一些稍复杂的控件的添加方法,及如何为它们添加消息处理函数. 一.为Ribbon Bar添加更多Ribbo ...

  6. 为ASP.NET控件添加常用的JavaScript操作

    1.为button控件添加确认功能 要想为服务器控件添加客户端的事件,需要用到Attributes属性.Attributes属性是所有的服务器控件都有的一个属性,它用来为最终生成的HTML添加自定义的 ...

  7. 在asp.net中为Web用户控件添加属性和事件

    在90年代初,Microsoft为Web程序员提供的 Active Server Pages(ASP)革命性地改变了Web的编程.它可以利用十分易用的模型在Web服务器上动态生成HTML,并且很容易的 ...

  8. SAP UI5 应用开发教程之六十六 - 基于 OData V4 的 SAP UI5 表格控件如何实现删除功能试读版

    一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...

  9. 鸡啄米MFC教程笔记之七:对话框:为控件添加消息处理函数

    MFC为对话框和控件等定义了诸多消息,我们对它们操作时会触发消息,这些消息最终由消息处理函数处理.比如我们点击按钮时就会产生BN_CLICKED消息,修改编辑框内容时会产生EN_CHANGE消息等.一 ...

最新文章

  1. 机器人 陆梅东_机器人知识与实践比赛获奖 - 上海徐汇区青少年活动中心
  2. DDoS攻击与CC攻击的区别
  3. 一笔画问题 连通图(搜索+队列)
  4. 对样本不均衡一顿操作
  5. 基于ASP.NET的comet简单实现
  6. ES6新特性之函数优化-参数默认值
  7. VC网络通信API概览
  8. [转载]Android Layout标签之-viewStub,requestFocus,merge,include
  9. C# WPF发票打印
  10. [vue] 说说你对vue组件的设计原则的理解
  11. 没有bug队——加贝——Python 练习实例 7,8
  12. 远程访问dmz和虚拟服务器的设置
  13. git冲突解决方案 Intellij IDEA
  14. Eclipse 快捷键整理
  15. flume hdfs sink 文件滚动策略
  16. LUOGU P3919 【模板】可持久化数组(主席树)
  17. Linux上修改open files数目
  18. 不存在_别傻了,根本就不存在缘分天定
  19. PDCA循环——快速提升软件质量的必备工具
  20. 如何写简历才能够突显自己的厉害之处?

热门文章

  1. flask对mysql数据库增删改查_Flask学习(三) - Flask-SQLAlchemy对数据库增删改查
  2. 机器人庄园作文_十年后的家乡作文精选8篇
  3. csp-c模拟测试43「A·B·C」
  4. java.util中,util是什么意思
  5. Hitting refresh on my career(译)----重新定义我的事业
  6. mongodb中Gson和java##Bean对象转化类
  7. 遮罩窗体弹出登录页面代码实现
  8. Xcode版本更新后插件失效解决办法
  9. Oracle 关于事物的描述
  10. Openjudge-计算概论(A)-放苹果