Prevent images to be pasted in Radeditor

[Bahman]

I want to prevent users from pasting images inside the Radeditor. I don't want to prevent them pasting at all but if there is an image in the pasted content I want it to be filtered out and not pasted inside the editor. 
I used this code to fire "PastePlainText" to do so:

    function OnClientLoadRadEditor(editor, args) {
        var element = document.all ? editor.get_document().body : editor.get_document();
        $telerik.addExternalHandler(element, "paste", function (e) {
            editor.fire("PastePlainText");
            //cancel the browser's paste event
            if (e.preventDefault) e.preventDefault();
            if (e.stopPropagation) e.stopPropagation();
            return false;
        });
    }

It works fine when I copy HTML code that has images inside, and it filters the images. But when I copy the image itself and paste it in the editor the above event won't be fired and the image will be copied.
I also tried OnClientPasteHtml() but I don't know how to filter the images with this function. 

It seems that different browsers have different functionality on this issue and I'm a bit confused. Currently I'm testing by Chrome and IE.

I wonder if I went the wrong way from the beginning! Could you please suggest me a solution? I need the editor not to accept images at all.

[Ianko]

Hi Bahman,

I suggest using regular expressions to strip the images from the value of the pasted content. Please refer to the following example setup:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml">
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientPasteHtml(editor, args) {
        var value = args.get_value();
        var strippedContent = value.replace(/\<img .+?\>/ig, "");

        var confirmStripping = confirm("Do you want to strip the images?");
        if (confirmStripping) {
            args.set_value(strippedContent);
        }
    }
</script>

Regards,
Ianko
Telerik

[Bahman]

Thanks Ianko for your reply. I'm sorry for my previous post. I wrote my onpaste event name instead of OnClientPasteHtml(). I edited that.

I tried this event already. It works fine in IE but doesn't work in Chrome when I right click on an image in a webpage and copy it and then paste it inside the editor.

[Ianko]

Hello Bahman,

The described behavior under Chrome is a result of an implemented feature in the paste functionality of the Editor. This feature preserves the data of the picture, additionally this is caused before the OnClientPasteHtml event and this is why this image is not being strip by the custom logic. 

This feature can be disabled with some additional JavaScript code, which overrides the built-in function and returns false to stop the logic. Please follow the further modified customization:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml">
</telerik:RadEditor>



<script type="text/javascript">
    Telerik.Web.UI.Editor.ClipboardImagesProvider.prototype.supportsClipboardData = function (event) {
        return false;
    }


    function OnClientPasteHtml(editor, args) {
        var value = args.get_value();
        var strippedContent = value.replace(/\<img .+?\>/ig, "");

        var confirmStripping = confirm("Do you want to strip the images?");
        if (confirmStripping) {
            args.set_value(strippedContent);
        }
    }
</script>

Regards,
Ianko
Telerik

[Bahman]

Thank you so much. That was a nice one! It is working perfectly now. 

[QiQo]

Well, I've implemented the proposed solution together with FTP content provider for ImageManager and DocumentManager.

My issue is that pasting images is blocked, but now i can't insert images through ImageManager.

 Any ideas?

[Rumen]

You can check inside the OnClientPasteHtml function whether it is triggered by the Paste or the ImageManager command. If it it fired by Paste (args.get_commandName() == "Paste") to strip the img tag, if it is triggered by the ImageManager to leave it intact.

Examine the description of the https://demos.telerik.com/aspnet-ajax/editor/examples/onclientpastehtml/defaultcs.aspx demo for more information.

[QiQo]

Rumen, 

thank you for your comment.

I've already done what you suggested and everything works like a charm.

[Rumen]

Great! Keep up the good work, Kristian!