Prevent images to be pasted in Radeditor

5 posts, 0 answers
  1. Bahman
    Bahman avatar
    3 posts
    Member since:
    Oct 2013

    Posted 21 Oct 2013 Link to this post

    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.
  2. Ianko
    Admin
    Ianko avatar
    1940 posts

    Posted 22 Oct 2013 Link to this post

    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.
  3. Bahman
    Bahman avatar
    3 posts
    Member since:
    Oct 2013

    Posted 22 Oct 2013 Link to this post

    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.
  4. Ianko
    Admin
    Ianko avatar
    1940 posts

    Posted 23 Oct 2013 Link to this post

    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.
  5. Bahman
    Bahman avatar
    3 posts
    Member since:
    Oct 2013

    Posted 23 Oct 2013 Link to this post

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