Copy and Paste Image into RadEditor using Chrome

6 posts, 0 answers
  1. Gary
    Gary avatar
    22 posts
    Member since:
    Sep 2010

    Posted 22 Nov 2016 Link to this post

    Hello,

     

    I have a page that has a radEditor control on it.  I was trying to copy and paste an imige into the editor or to drag and drop the image into the editor.  It works just fine when using FireFox v45.4.0  but will not work at all when using Cgrome v54.0.2840.99

     

    Can anyone explain why this functionality will not work while using Chrome?

    Is there any work around?

     

    Thanks,

     

    Gary

  2. Joana
    Admin
    Joana avatar
    134 posts

    Posted 23 Nov 2016 Link to this post

    Hi Gary,

    The content area of RadEditor is an editable iframe which uses the Rich Text Editing engine of the used browser. The reported issue is not a bug of RadEditor, but a browser behavior, which you can reproduce in an editable iframe. For your convenience I've attached a sample page with editable iframe where you could test your scenario.

    Regards,
    Joana
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  3. Gary
    Gary avatar
    22 posts
    Member since:
    Sep 2010

    Posted 23 Nov 2016 in reply to Joana Link to this post

    Thanks for the reply.   I was well aware that this was not a Telerik radEditor issue.  I have suspected all along that this is an issue with Chrome.  I was just wondering if others have reported this issue and if anyone had a work around for it.

    I have test the radEditor with other browsers and it works just fine.  This seems to be localized to Chrome.

    Thank you again, and if you have any feedback from tohers regarding this issue with Chrome please  bring it to my attention.

  4. Nikolay
    Admin
    Nikolay avatar
    84 posts

    Posted 25 Nov 2016 Link to this post

    Hi Gary,

    Pasting a copied from MS Word image works in Chrome but if the image is copied from the file system, the paste event is not fired.

    Drag and drop of an image in Chrome could be easy enabled. You can handle drop event, get the image from the event object and insert it into the editor. Here is an example:
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
    </telerik:RadEditor>
     
    <script>
        function OnClientLoad(editor, args) {
            $telerik.$(editor.get_contentArea()).on("drop", function (e) {
                var origEvent = e.originalEvent;
                if (!origEvent || !origEvent.dataTransfer || !origEvent.dataTransfer.items) {
                    return;
                }
                var item = origEvent.dataTransfer.items[0];
                if (!item || item.type.indexOf("image") == -1) {
                    return;
                }
                var blob = item.getAsFile();
                var URLObj = window.URL || window.webkitURL;
                var source = URLObj.createObjectURL(blob);
                var image = new Image();
                image.src = source;
                $telerik.$(image).load(function (ev) {
                    var reader = new FileReader();
                    reader.onload = function (event) {
                        if (image.src != event.target.result) {
                            image.src = event.target.result;
                            var selection = editor.getSelection();
                            selection.insertNode(image);
                        }
                    };
                    reader.readAsDataURL(blob);
                });
            });
        }
    </script>


    Regards,
    Nikolay
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  5. Gary
    Gary avatar
    22 posts
    Member since:
    Sep 2010

    Posted 04 Jan in reply to Nikolay Link to this post

    HI , 

    I tried the suggested script and it still does not work in either Chrome or IE

    Any other suggestions?

    Thanks,

    Gary

  6. Nikolay
    Admin
    Nikolay avatar
    84 posts

    Posted 05 Jan Link to this post

    Hi Gary,

    An error has raised when the editor's content area is not focused. Use the modified code below. You can see how it behaves in the attached short video.
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
    </telerik:RadEditor>
      
    <script>
        function OnClientLoad(editor, args) {
            $telerik.$(editor.get_contentArea()).on("drop", function (e) {
                var origEvent = e.originalEvent;
                if (!origEvent || !origEvent.dataTransfer || !origEvent.dataTransfer.items) {
                    return;
                }
                var item = origEvent.dataTransfer.items[0];
                if (!item || item.type.indexOf("image") == -1) {
                    return;
                }
                var blob = item.getAsFile();
                var URLObj = window.URL || window.webkitURL;
                var source = URLObj.createObjectURL(blob);
                var image = new Image();
                image.src = source;
                $telerik.$(image).load(function (ev) {
                    var reader = new FileReader();
                    reader.onload = function (event) {
                        if (image.src != event.target.result) {
                            image.src = event.target.result;
                            var selection = editor.getSelection();
                            var range = editor.getDomRange();
                            if (range) {
                                selection.insertNode(image, range);
                            } else {
                                $telerik.$(editor.get_contentArea()).prepend(image);
                            }
                        }
                    };
                    reader.readAsDataURL(blob);
                });
            });
        }
    </script>


    Regards,
    Nikolay
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top