Я реализовал в нем редактор кендо. Я реализовал браузер изображений кендо. Я реализовал это так, как описано в документации, с тем же внутренним контроллером.
Я реализовал окно подтверждения кендо и для других функций. Мне нужно уведомление кендо вместо javascript предупреждение для подтверждения при удалении одного изображения. поэтому я зафиксировал событие удаления и с помощью event.stopPropagation мне удалось остановить поведение удаления по умолчанию и реализовать окно подтверждения kendo. на его кнопке ok я вызвал метод backend destroy контроллера для удаления изображения с помощью ajax.
К счастью, он успешно удален из backend , но со стороны просмотра, которая находится в миниатюре браузера изображений, он не удаляет , после обновления он переходит со стороны просмотра или удаляется из миниатюры. Я также пытался вручную удалить соответствующий li, который был удален, но как только я загружаю новое изображение, которое удалено, li также появляется с удаленным изображением, хотя оно было удалено из бэкэнда. Вот код, как я реализовал браузер изображений:
function createEditor(id)
{
//Kendo Editor for content
$(id).kendoEditor({
encoded: false,
tools: [
"bold",
"italic",
"underline",
"strikethrough",
],
imageBrowser: {
transport: {
read: "/ImageBrowser/Read",
destroy: {
url: '/ImageBrowser/Destroy',
type: "POST"
},
create: {
url: '/ImageBrowser/Create',
type: "POST"
},
thumbnailUrl: '/ImageBrowser/Thumbnail',
uploadUrl: '/ImageBrowser/Upload',
imageUrl: "../Content/article/" + userId + "/{0}"
},
}
});
//On click of imagebrowser icon of editor
$(".k-i-image").click(function () {
setTimeout(function () {
// Attach a select handler to the Upload embedded in the ImageBrowser.
$(".k-imagebrowser .k-upload").find("input").data("kendoUpload").bind("select",
function (e) {
// Prevent the event if the selected file is not of specified extension.
if (e.files[0].extension.toLowerCase() != ".jpg" && e.files[0].extension.toLowerCase() != ".jpeg" && e.files[0].extension.toLowerCase() != ".png" && e.files[0].extension.toLowerCase() != ".gif") {
e.preventDefault();
$("<div></div>").kendoAlert({
title: false,
content: "The file extension is not *.png,*.gif,*.jpg,*.jpeg.",
buttonLayout: "normal"
}).data("kendoAlert").open();
}
var s = e.files[0].size / Math.pow(1000, 2);
//Size validation
if (s > 5) {
e.preventDefault();
$("<div></div>").kendoAlert({
title: false,
content: "File size should not be more than 5 MB",
buttonLayout: "normal"
}).data("kendoAlert").open();
}
$('.k-reset.k-floats.k-tiles.k-widget.k-listview.k-selectable').children('li').each(function (index, value) {
// Prevent the event if the selected file is already exist.
if ($(this).children("strong").html() == e.files[0].name) {
e.preventDefault();
$("<div></div>").kendoAlert({
title: false,
content: "A file with name already exists in the current directory",
buttonLayout: "normal"
}).data("kendoAlert").open();
}
});
});
//Delete image from image browser
$(".k-toolbar-wrap>.k-button-icon").click(function (event) {
var type;
var name;
if ($(this).children().hasClass("k-i-close")) {
//alert();
//event.preventDefault();
event.stopPropagation();
var path = "";
var img;
$('.k-breadcrumbs-wrap').children('a').each(function (index, value) {
if ($(this).hasClass("k-link")) {
path = path + $(this).text() + "/";
}
});
$('.k-reset.k-floats.k-tiles.k-widget.k-listview.k-selectable').children('li').each(function (index, value) {
if ($(this).hasClass("k-tile k-state-selected")) {
img = $(this).attr("data-uid");
type = $(this).attr("data-type");
name = $(this).children("strong").html();
}
});
//alert(path);
window.OpenDeleteConfirm("Are you sure you want to delete this record?").then(function (e) {
$.ajax({
type: 'POST',
url: "/ImageBrowser/Destroy",
data: { "path": path, "type": type, "name": name },
success: function (response) {
//$(".k-reset.k-floats.k-tiles.k-widget.k-listview.k-selectable>.k-tile.k-state-selected").remove();
}
});
}, function () {
// window.myalert("You chose to Cancel action.");
});
}
else {
}
});
//End
});
});
}```