kindeditor 扩充，粘贴图片时，将图片保存，支持 ie和firefox

最新推荐文章于 2025-06-09 12:36:25 发布

lisa890608

最新推荐文章于 2025-06-09 12:36:25 发布

阅读量1.1k

点赞数

分类专栏：前端

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种KindEditor编辑器的扩展方法，该方法允许用户通过粘贴操作上传图片到服务器，并支持IE和Firefox浏览器。文章提供了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

www.MyException.Cn 发布于：2012-11-10 10:48:50 浏览：22次

kindeditor 扩展，粘贴图片时，将图片保存，支持 ie和firefox

kindeditor 扩展，粘贴图片时，将图片保存，支持 ie和firefox
<script type="text/javascript">
        KE.show({
            id : 'content',
            cssPath : 'kindeditor/index.css',
            resizeMode:'0',
            imageUploadJson:'<%=basePath%>imageUploadServlet',
            fileManagerJson:'<%=basePath%>imageUploadServlet',
            afterCreate : function(id) {
                /* 响应 ctrl + v ，保存图片
                KE.event.ctrl(document, 86, function() {
                    KE.util.setData(id);
                });
                KE.event.ctrl(KE.g[id].iframeDoc, 86, function() {
                    KE.util.setData(id);
                    var doc = KE.g[id].iframeDoc;
                    setTimeout(dealdoc(doc),100);
                });
                */
                //ie 中粘贴 --- 包括 toolbar 中的粘贴和右键浏览器菜单中的粘贴
                KE.g[id].iframeDoc.body.onpaste = function (){
                    var doc = KE.g[id].iframeDoc;
                    setTimeout(dealdoc(doc),100);
                };
                //firefox 粘贴 --- 包括 ctrl+v 和右键浏览器菜单中的粘贴
                $(KE.g[id].iframeDoc).bind('paste', null, function() {
                       var doc = KE.g[id].iframeDoc;
                    setTimeout(dealdoc(doc),100);
                });
           }
        });

    //屏蔽主页面中的右键菜单
        document.oncontextmenu = function (){
            return false;
        }
        //返回一个无参的方法，用于setTimeout
        function dealdoc(doc){
            return function(){
                deal(doc);
            }
        };

//粘贴时处理图片 - - 方法一：异步，只能接受一张图片
        function deal(doc){
            var links = doc.getElementsByTagName("img");
            for(var i=0;i<links.length;i++){
                var lin = $(links[i]);
                if($(lin).attr("add_src")){

                }else{
                    //links[i].src = "<c:url value='/saveImageServlet?

imageurl='/>"+links[i].src;
                    var imgurl = $(lin).attr("src");
                    $.ajax({
                         type: "POST",
                        url: "<c:url value='/saveImageServlet'/>",
                        data: "imageurl="+imgurl,
                        dataType:"html" ,
                        success:function(org){
                             $(lin).attr("src","");
                             $(lin).attr("src",org);
                            $(lin).attr("add_src","1");
                        }
                    });

                }
            }
        }

        //粘贴时处理图片-- 方法二：同步，可以接受多张图片
        function deal(doc){
            var links = doc.getElementsByTagName("img");
            for(var i=0;i<links.length;i++){
                var lin = $(links[i]);
                if($(lin).attr("add_src")){

                }else{
                    //links[i].src = "<c:url value='/saveImageServlet?

imageurl='/>"+links[i].src;
                    var imgurl = $(lin).attr("src");
                    var html = $.ajax({
                         type: "POST",
                        url: "<c:url value='/saveImageServlet'/>",
                        data: "imageurl="+imgurl,
                        dataType:"html" ,
                        async: false

                    }).responseText;
                    $(lin).attr("src","");
                    $(lin).attr("src",html);
                    $(lin).attr("add_src","1");

                }
            }
        }
    </script>