kindeditor给图片添加删除功能,亲测在用

正文开始

kindeditor-all.js

line:3610:

'table.ke-zeroborder td {border:1px dotted #AAA;}',
替换成,防止td内输入数字英文不会换行。
'table.ke-zeroborder td {border:1px dotted #AAA;word-wrap: break-word;word-break: break-all;}',

line:6865

imgPath = self.pluginsPath + name + '/images/',
下面加(定义删除图片的api):
delImgApi = K.undef(self.delImgApi, 'delurl'),
//配置时记得自定义参数:delImgApi:'https://xxxxxxx'

line:6884

'<div style="padding:10px 20px;">',
下面加
'<style type="text/css">',
            '.relative{position:relative;}',
            '.operate-box{',
            '   position:absolute;top:-100px;left:0px;',
            '   transition:top 0.6s;',
            '   -moz-transition:top 0.6s; /* Firefox 4 */',
            '   -webkit-transition:top 0.6s; /* Safari and Chrome */',
            '   -o-transition:top 0.6s; /* Opera */',
            '}',
            '.black_overlay{',
            '   background-color:black;-moz-opacity:0.8;opacity:.60;filter:alpha(opacity=80);position:absolute;left:0px;top:0px;',
            '   width: 100px;height: 100px;z-index:99;}',
            '.operate{',
            '   position:absolute;left:0px;top:0px;',
            '   width: 100px;height: 100px;z-index:199;padding:0px 15px;}',
            '.operate .left, .operate .right{width:30px;height:100px;line-height:100px;display:inline-block;text-align:center;}',
            '.operate img{',
            '   width:20px;border-radius:12px;z-index:199;background:#fff;',
            '   transition:transform 0.6s;',
            '   -moz-transition:transform 0.6s; /* Firefox 4 */',
            '   -webkit-transition:transform 0.6s; /* Safari and Chrome */',
            '   -o-transition:transform 0.6s; /* Opera */',
            '}',
            '.operate img:hover{',
            '   transform:scale(1.5,1.5);',
            '   -ms-transform:scale(1.5,1.5); /* IE 9 */',
            '   -moz-transform:scale(1.5,1.5); /* Firefox */',
            '   -webkit-transform:scale(1.5,1.5); /* Safari and Chrome */',
            '   -o-transform:scale(1.5,1.5); /* Opera */',
            '}',
            '.operate .icon-add{border:1px solid #a6cc7a;}',
            '.operate .icon-delete{border:1px solid #ef6455;}',
            '</style>',

line:6937

el.click(function(e) {
    clickFn.call(this, fileUrl, data.filename);
});
改成:
$(el).find(".icon-add").click(function(e) {
    clickFn.call(this, fileUrl, data.filename);
});

line:7009

.mouseover(function(e) {
    K(this).addClass('ke-on');
})
改成
.mouseout(function(e) {
    K(this).removeClass('ke-on');
    //删除图片功能:鼠标移出,让操作框向下滑出
    $(K(this)).find(".operate-box").css({"top":"-100px"});
});

line:7018

var img = K('<img src="' + iconUrl + '" width="80" height="80" alt="' + data.filename + '" />');
                if (!data.is_dir || data.has_file) {
                    photoDiv.css('cursor', 'pointer');
                    bindTitle(photoDiv, data);
                    bindEvent(photoDiv, result, data, createView);
                } else {
                    photoDiv.attr('title', lang.emptyFolder);
                }
                photoDiv.append(img);
加个属性data-id
并且在img绑定事件之前 增加删除按钮 
替换成
var img = K('<img src="' + iconUrl + '"  data-id="' + data.id + '" width="80" height="80" alt="' + data.filename + '" />');

                photoDiv.append(img);
                //添加删除图片功能
                var bgHtml = [
                    '<div class="operate-box">',
                    '   <div class="black_overlay"></div>',
                    '   <div class="operate">',
                    '       <div class="left"><img src="'+imgPath+'add_24.png" alt="" class="icon-add"/></div>',
                    '       <div class="right"><img src="'+imgPath+'delete_24.png" alt="" class="icon-delete"/></div>',
                    '   </div>',
                    '</div>'
                ].join(" ");
                photoDiv.append(bgHtml);
                if (!data.is_dir || data.has_file) {
                    photoDiv.css('cursor', 'pointer');
                    bindTitle(photoDiv, data);
                    bindEvent(photoDiv, result, data, createView);
                } else {
                    photoDiv.attr('title', lang.emptyFolder);
                }
                $(photoDiv).find(".icon-delete").click(function(event){
                    if(!confirm("确认删除该图片吗?")) return false;
                    var parentDiv =  $(this).parents(".ke-item");
                    var id_ = $(this).parents(".ke-photo").find("img:first").attr("data-id");
                    //发送删除图片请求
                    $.post(delImgApi,{imgId: id_},function(json){
                        if(json.error===0) {
                            parentDiv.remove();
                        } else {
                            alert(json.message);
                        }
                    },"json");
                });

最后补充两个icon在路径: \kindeditor\plugins\filemanager\images 自己不喜欢可以替换

正文结束

js 正则替换返回值做回调函数 没有上一篇