This is a migrated thread and some comments may be shown as answers.

Prevent images to be pasted in Radeditor

4 Answers 135 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Bahman
Top achievements
Rank 1
Bahman asked on 21 Oct 2013, 05:30 AM
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.

4 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 22 Oct 2013, 10:26 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Bahman
Top achievements
Rank 1
answered on 22 Oct 2013, 10:20 PM
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.
0
Ianko
Telerik team
answered on 23 Oct 2013, 01:45 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Bahman
Top achievements
Rank 1
answered on 23 Oct 2013, 10:48 PM
Thank you so much. That was a nice one! It is working perfectly now. 
Tags
Editor
Asked by
Bahman
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Bahman
Top achievements
Rank 1
Share this question
or