回到顶部

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

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

标签: KindEditor  

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人立场,如涉及侵权,请及时告知。

评论努力加载中...
暂无评论
暂无评论

手机扫码阅读

热门相关

加载中...
关于我们   联系我们   申请友链   赞助记录   站点地图
© 2014 - 2017 www.80iter.com All Rights Reserved. 京ICP备14042174号-1
本站遵循 CC BY 4.0 协议,转载请注明出处 。