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 圖片空間增加刪除操作就完成了

由龐順龍最後編輯於：3年前

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。