Copy and Paste Image into RadEditor using Chrome

[Gary]

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

[Joana]

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

[Gary]

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.

[Nikolay]

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

[Gary]

HI , 

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

Any other suggestions?

Thanks,

Gary

[Nikolay]

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