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

Copy and Paste Image into RadEditor using Chrome

5 Answers 127 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 2
Gary asked on 22 Nov 2016, 06:56 PM

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

5 Answers, 1 is accepted

Sort by
0
Joana
Telerik team
answered on 23 Nov 2016, 06:15 AM
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.
0
Gary
Top achievements
Rank 2
answered on 23 Nov 2016, 03:25 PM

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.

0
Nikolay
Telerik team
answered on 25 Nov 2016, 10:34 AM
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.
0
Gary
Top achievements
Rank 2
answered on 04 Jan 2017, 05:40 PM

HI , 

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

Any other suggestions?

Thanks,

Gary

0
Nikolay
Telerik team
answered on 05 Jan 2017, 11:50 AM
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.
Tags
Editor
Asked by
Gary
Top achievements
Rank 2
Answers by
Joana
Telerik team
Gary
Top achievements
Rank 2
Nikolay
Telerik team
Share this question
or