kindeditor 图片管理增加删除操作按钮

时间：4年前   作者：庞顺龙   浏览：1114   [站内原创，转载请注明出处]

kindeditor 图片管理增加删除操作按钮

1、kindeditor 编辑器的使用比较广泛，对于一些企业后台来说，重复图片会占用网站空间，但是默认的kindeditor 图片管理并没有带有删除功能，不过基于强大的插件编写扩展我们还是可以自己添加的

2、简要实现展示

已上传到网站空间的图片列表

实现效果，鼠标移入图片区域显示删除层，效果如下：

3、实现方式简要分析，首先找到图片空间的图片管理 filemanager.js ，这个文件是编辑器用来管理上传的文件的，通过分析可以找到图片列表加载的js方法createView，在尾部追加自定义的js方法即可

在 div.append('<div class="ke-name" title="' + data.filename + '">' + data.filename + '</div>'); 后追加：

if (data.is_photo) {
    var _span = K('<span class="xl_span" data-url="' 
    	+ K.formatUrl(result.current_url + data.filename, 'absolute') 
    	+ '" style="position:absolute;display:none;width:102px;background:#0690d2;color:#FFF;text-align:center; cursor: pointer;line-height:20px;bottom:-3px;left:0;">' 
    	+ lang.deleteImg + '</span>');
    div.append(_span);
}

上面代码就实现了鼠标移入的删除提示层效果

4、增加实际ajax删除方法js，在 createView 方法的for循环后追加点击ajax方法

K(".xl_span").click(function () {
    var $this = K(this);
    if (!confirm(lang.deleteConfirm)) {
        return false;
    }
    $.ajax({
        url: "/blog/delBlogImg", //路径
        type: "get", //请求方式
        data: "imgurl=" + $this.attr("data-url"), //请求的数据
        dataType: "json",
        success: function (res) {
            if (res == '1') {
                $this.parent().remove();
            } else {
                alert(lang.deleteError);
            }
            if (K(".ke-plugin-filemanager-body").children().length < 1) {
                K(".ke-plugin-filemanager-body").html(lang.noImg)
            }
        }

    })
})

上面代码其实就是一个ajax异步调用后台删除图片的操作，具体不讲解了就。

5、这样就实现了删除操作，效果如下：

6、至此 kindeditor 图片空间增加删除操作就完成了

由庞顺龙最后编辑于：4年前

内容均为作者独立观点，不代表八零IT人立场，如涉及侵权，请及时告知。