Preventing Image Drops in the Kendo UI Editor
Environment
| Product | Progress® Kendo UI® Editor |
| Version | 2024.4.1112 |
Description
I want to prevent users from dropping images into the Editor for Progress® Kendo UI®. This knowledge base article also answers the following questions:
- How can I stop images from being pasted into the Editor?
- What method can I use to block image drops in the Editor?
- Is there a way to disable image pasting in the Editor?
Solution
To prevent an image from being dropped into the Editor, utilize the paste event. In the event handler, check if the pasted content includes an <img> tag and stop the event's propagation if it does.
Here's how you can implement this solution:
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
paste: function(e) {
if(e.html.includes("img")) {
e.stopPropagation();
}
}
});
</script>
This code checks the HTML content being pasted and cancels the event if an <img> tag is found, effectively preventing the image from being dropped into the Editor.