为Kindeditor控件添加图片自动上传功能

简介:

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

复制代码
function df() {
    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");
            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 + "张图片已经上传成功!&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 class uploadpic : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string pic = context.Request.QueryString["pic"];

        string[] arr = pic.Split('|');
        string sstr = "";
        UpLoadIMG st = new UpLoadIMG();
        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;
                    else
                        sstr += std + "|";
                }
            }
        }
        context.Response.Write(sstr);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

public class UpLoadIMG
{
    public string SaveUrlPics(string imgurlAry, string path)
    {
        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 = new WebClient();
            wc.DownloadFile(imgurlAry, dirPath + newFileName);
            strHTML = ymd + "/" + newFileName;
        }
        catch (Exception ex)
        {
            //return ex.Message;
        }
        return strHTML;
    }
}
复制代码

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

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


本文转自Jaxu博客园博客,原文链接:http://www.cnblogs.com/jaxu/p/3824583.html,如需转载请自行联系原作者

相关文章
|
前端开发 BI UED
Silverlight中的拖拽实现的图片上传
原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接放到浏览器中,我在想使用这个功能来做成图片上传(或者文件上传),这样的用户体验将会是非常好的。
815 0
|
Windows
NSIS:简单按钮美化插件SkinButton,支持透明PNG图片。
原文 NSIS:简单按钮美化插件SkinButton,支持透明PNG图片。 征得作者贾可的同意,特发布按钮美化插件SkinButton。   插件说明: 使用GDI+库写的一个简单按钮美化插件,支持透明PNG图片。
1309 0
|
前端开发
CSS-实战-上传按钮美化
1、实现效果 实现效果 2、实现思路 (1) 创建丑陋的文件输入框 丑陋的文件输入框 (2)创建美化的DIV 美化后的div (3)设置丑陋的输入框透明 (4)使用美化后的DIV遮挡默认输入框。
1140 0
|
前端开发 JavaScript
【Layui】解决如何使用富文本编辑器和富文本上传显示图片
【Layui】解决如何使用富文本编辑器和富文本上传显示图片
276 0
【Layui】解决如何使用富文本编辑器和富文本上传显示图片
|
JavaScript 前端开发 .NET
CKeditor自定义上传图片功能
CKeditor可以配合CKfinder实现文件的上传及管理。但是往往我们上传的图片需要某些自定义的操作,比如将图片路径写入数据库,图片加水印等等操作。 实现原理:配置CKeditor的自定义图标,单击弹出一个子窗口,在在子窗口中上传图片实现我们的自己的功能,然后自动关闭子窗口将图片插入到CKeditor的当前光标位置。
1914 0
kindeditor富文本编辑器插件 如何实现将本地的图片复制粘贴
目前的需求是 将桌面上的一张图片,进行复制后,可以粘贴到富文本编辑器里面,借用了大佬的这个方法,但是ie浏览器,粘贴图片的时候没办法触发这个paste方法 不知道是因为啥?求大佬帮助
|
JavaScript 前端开发
JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果
原文:JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果 一、photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图。 看到的页面效果是这样的:   1、实现思路 这个功能在之前的JavaScript美术馆那里已经实现了。
1123 0
|
移动开发
H5实现多图片预览上传,可点击可拖拽控件介绍
在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到上传框直接上传,方便,好用,接口也简单,基本可以直接放到项目里使用。 先看看他的样式: 选择图片后: $(function(){ // 初始化插件 $("#demo").zyUpload({ width : "650px",
1794 0

热门文章

最新文章