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

Paste image from clipboard in rad editor

38 Answers 617 Views
Editor
This is a migrated thread and some comments may be shown as answers.
vikram
Top achievements
Rank 1
vikram asked on 29 Jan 2009, 07:17 AM
Hi,
How i can paste image  from clipboard in radEditor. I have taken a snapshot from a Pdf file and i want to paste it in rad editor.

Thanks

38 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 02 Feb 2009, 03:03 PM | edited on 27 May 2021, 12:24 PM

Hello Vikram,

 

=============================================

Updated on 22 May 2021:

At the time of writing the solution is to copy only a single image from Word and to paste it into RadEditor.

If you copy both text and an image or multiple images from MS Word and paste in the Editor, the image will not get pasted as expected. This behavior is due to the security policy of the browser.

Instead of reading the image data and loading it as a base64 string to the src attribute of the <img>element, the browser generates an <img> tag which points to the clipboard location of the file on the client machine.

A browser is not allowed to access such a resource, and so it throws an error and the image is not rendered which you can verify in the browser dev tools console, you will see an error such as: "Not allowed to load local resource: <some image path>".

You can read more about this in this StackOverflow thread.

 

=============================================

When copying an image from external location such as MS Word document or a PDF file, then its src points to your hard disk, which is not accessible in Internet.

In order to use images in a web page, they need to be accessible using HTTP protocol - that is, it means they must be uploaded to a web server (which can be your own computer of course, only that the images are provided by the web server software, and not by the operating system).

Unfortunately the automatic image upload to the server is not possible with javascript code, because JavaScript cannot access the local file system from the browser - it would be a major security violation.
The automatic image upload cannot be implemented without using ActiveX or some other software, installed on the client, but we do not use either technique because of browser compatibility and that the ActiveX components are forbidden by the corporate networks.

What we suggest is to paste the screenshot in program such as MS Paint and save it. After that manually upload the image using the Upload functionality of the RadEditor's Image Manager dialog and insert it into the content area after that.

Kind regards,
Rumen
the Telerik team


Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Dustin
Top achievements
Rank 1
answered on 01 Sep 2010, 02:52 PM
I am using the most recent version of the RadEditor control and I am able to paste an image copied to the clipboard into the RadEditor content area in Firefox 4, but not in Firefox 3.x or IE8. Does anyone know why this is possible in FF4, but not any other browser? Is there a config setting allowing this in FF4. I checked the config setting differences between FF3 and FF4 and couldn't find any settings differences that would make this possible in FF4 and not FF3.

I need to allow my users to embed images in the RadEditor content area from there PC. It would be nice to allow them to paste an image from their clipboard especially, since it works perfectly in FF4.

The ImageManager is a nice tool, but it only allows access to relative paths. Any ideas? Is there any existing Rad controls/tools to at least allow the user to open a dialog to select an image and then have it embedded in the content area?
0
Rumen
Telerik team
answered on 02 Sep 2010, 02:33 PM
Hello Dustin,

This a entirely new image paste functionality introduced by the Firefox developers in version 4 beta. I noticed that when an image is pasted from MS Word in editable IFRAME as the content area of RadEditor in FF 4beta, it is pasted with its data in the markup. You can see my test at http://screencast.com/t/Y2M2OWNhO.

This feature is not supported by the rest of competitors' browsers and if it becomes popular it will be implemented in the other major browsers.

Best regards,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
hazem
Top achievements
Rank 1
answered on 23 Mar 2011, 09:32 PM
Is there an update for pasting images in IE 9?
0
Rumen
Telerik team
answered on 24 Mar 2011, 04:50 PM
Hi Hazem,

IE9 still does not support pasting images from the clipboard. However, this feature was officially introduced in Firefox 4.


Greetings,
Rumen
the Telerik team
0
Priyesh
Top achievements
Rank 1
answered on 14 Oct 2011, 06:48 AM
Hello Rumen,

I am copying image+text onto the clipboard from an mht file opened in an iframe and pasting it into the radeditor, but only text is getting pasted and images get stripped. That mht file is created of course in my web server only. Please overcome this problem of mine or give me other solution  for this.

Thanks & Regards,
Priyesh
0
Rumen
Telerik team
answered on 14 Oct 2011, 01:10 PM
Hi Priyesh,

This is a browser limitation. Are you able to paste the text plus the image in an editable DIV or IFRAME?
For your convenience I have attached a sample HTML page with an editable iframe. If the image is not copied than this is definitely a browser restriction.

Here is an editable div element:
<div contenteditable="true" style="width:300px;height:300px;border: 1px solid red;">sample content</div>


Best wishes,
Rumen
the Telerik team
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 their blog feed now
0
Priyesh
Top achievements
Rank 1
answered on 14 Oct 2011, 01:21 PM
Hi Rumen,

Thanks for your reply. I am unable to copy the text+image in the editable iframe, as usual text is getting copied but image doesnot. May b this is a browser restriction. But still my problem doesnt get solved..Hope i will find some other solution.

Thanks,
Priyesh
0
Rumen
Telerik team
answered on 14 Oct 2011, 01:52 PM
Hi Priyesh,

Since the restriction is exposed by the browser's developers, I am afraid that there is not a solution for it. The JavaScript engine is unable to deal with desktop applications as well as to access the file system of the client machine so it is not possible to copy the image.

You might search for some ActiveX, Silverlight or Flash WYSIWYG editors which could offer the required functionality.


Best regards,
Rumen
the Telerik team
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 their blog feed now
0
Kyle
Top achievements
Rank 1
answered on 15 Feb 2012, 09:05 PM
Hi Rumen / Telerik Team, 
Any guidance or 'wording' on what the feature firefox added is offically called? Is it "IFRAME as the content area"? 

We are trying to figure out what this is called so we can do research or ask around to see if this is something Chrome / IE x / Safari is considering implementing in their road-maps. Works great for Firefox, just wanted to be able to find out on other browsers if they were planning or not...

Thanks much,
-Kyle
0
Rumen
Telerik team
answered on 16 Feb 2012, 01:19 PM
Hi Kyle,

The pasted images from the clipboard in Firefox have the following src="data:image/png;base64.
I searched in Google and found that it is called Data URI scheme and provides a way to include data in-line in web pages as if they were external resources. You can find more information in Wikipedia: Data URI scheme and Google.

All the best,
Rumen
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Geir Andersen
Top achievements
Rank 1
answered on 07 Mar 2012, 09:56 PM
Hi,
Google Docs/Gmail has this kind of functionality for all browsers. You can copy images to clipboard and paste them directly into the editor. Is it possible to make something similar in Rad Editor? 
 
0
Rumen
Telerik team
answered on 08 Mar 2012, 04:33 PM
Hi,

I tried to paste an image in GMail in IE9 from MS Word as well as from Windows Photo Viewer but without success as you can see in the following video: http://screencast.com/t/UASyAp2w. The same behavior was observed in Google DOCS under IE9: http://screencast.com/t/odzCiqqHN0mH.

All the best,
Rumen
the Telerik team
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 their blog feed now.
0
Geir Andersen
Top achievements
Rank 1
answered on 22 Mar 2012, 03:34 PM
Hi,
Sorry, you are correct! It doesn't work with IE. But it seems to work with Chrome and Gmail/Docs.

http://screencast.com/t/CSgyPPOIW 
0
Rumen
Telerik team
answered on 22 Mar 2012, 04:50 PM
Hello,

Thank you for the provided video.

Indeed, its look possible to implement this feature for Chrome, but again this wouldn't be a cross browser solution supported in all browsers. Nevertheless, I logged this feature for research and if possible we will implement it for a future build of RadEditor.

Kind regards,
Rumen
the Telerik team
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 their blog feed now.
0
Priyesh
Top achievements
Rank 1
answered on 05 Jun 2012, 09:09 AM
Hello Rumen,

I have a issue with Radeditor. I need to set HTML content of radeditor through javascript . But somehow I am unable to set it. I am getting the ID of editor by " $find("editor");  " and i m getting it. But when I set html content to it, it gives me exception as object doesnot supports this property or method. Please resolve this issue.
0
Rumen
Telerik team
answered on 05 Jun 2012, 02:36 PM
Hello,

How did you set the content in RadEditor. The error that you get means that the reference to RadEditor is invalid. You can see how to get a reference to RadEditor in the following article: Getting a Reference to RadEditor and set the content in it using the pasteHtml or set_html methods.

It would be helpful, if you provide an example or project, which demonstrates your scenario too.

Regards,
Rumen
the Telerik team
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 their blog feed now.
0
Priyesh
Top achievements
Rank 1
answered on 06 Jun 2012, 04:47 AM
Hi Rumen,

The sample function of my scenario is:

<!--- In master page -->
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
var Editorid = <%= Editor.ClientID %>;  // getting the reference
var content = "some html content"; // some html content
if(Editorid !=null)

     Editorid.set_html(content);      // here comes a exception as "null is null or not an object"
}
<asp:Content>

Thanks,
Priyesh
0
Rumen
Telerik team
answered on 06 Jun 2012, 06:48 AM
Hello Priyesh,

You should replace this line

var Editorid = <%= Editor.ClientID %>;

with this one

var Editorid = $find("<%=Editor.ClientID %>");

My suggestion is to once again review the following help article: Getting a Reference to RadEditor.

You can also put a debugger in your code and inspect what happens.



Kind regards,
Rumen
the Telerik team
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 their blog feed now.
0
Priyesh
Top achievements
Rank 1
answered on 06 Jun 2012, 12:39 PM
Hi Rumen,

It overcame the problem. Now I am getting the reference properly.

Thanks,
Priyesh
0
Anjum
Top achievements
Rank 1
answered on 24 May 2013, 09:38 AM
As I understand after reading post, IE9 does not support,

Any update about IE 10.

What about chrome however Gmail and Google doc supports then why not red editor in my DNN 6.02 application

Anybody can help on this.
0
Marin Bratanov
Telerik team
answered on 28 May 2013, 02:12 PM
Hello Anjum,

Our latest version supports both IE9 and IE10, as well as Chrome. You can test the behavior of the control in various browsers in our online demos: http://demos.telerik.com/aspnet-ajax/editor. You can also find a list with the supported browsers here: http://www.telerik.com/products/aspnet-ajax/getting-started/tech-sheets/browser-support.aspx.

On DNN - they build their own provider based on our controls and if you have issues with that I advise that you post in their forums: http://www.dotnetnuke.com/Resources/Forums.aspx.


Regards,
Marin Bratanov
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 their blog feed now.
0
Fabian
Top achievements
Rank 1
answered on 07 Jun 2013, 10:41 PM
I Don't know  how can you do that  I need to Know that too
0
Marin Bratanov
Telerik team
answered on 12 Jun 2013, 08:16 AM
Hi Fabian,

The current state in the Q2 2013 release that is going to be live shortly is that images from MS Word can be pasted only under Firefox and Chrome. The former supports the feature natively and the latter offers API we have used explicitly. In both cases the images are converted to base64 strings, so large images will cause large content. The rest of the browsers do not offer such feature, as my colleague Rumen explained in the older posts in this thread. I hope this answers your question.


Regards,
Marin Bratanov
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
Shaun Peet
Top achievements
Rank 2
answered on 24 Oct 2014, 02:07 PM
Is there any way we can turn this OFF?

We experienced an issue this morning where a user (and most users don't know any better) took several 5 MB pictures from their computer, dragged them onto the web page, and created a massive mess of it (pretty much breaking everything).
0
Kyle
Top achievements
Rank 1
answered on 24 Oct 2014, 02:16 PM
I completely agree - thought it would also be nice to have the capability to allow pasted images but if they exceed specific size limits, to dis allow them, and prompt a customization message. This would also benefit for browsers like IE that have had less support for the feature - we've had instances where users upload large images, everything is swell, but then someone edits/saves the page in a version of IE which won't support that size of pasted image, and corrupts it on save...
0
Shaun Peet
Top achievements
Rank 2
answered on 24 Oct 2014, 02:19 PM
I can't find this anywhere in RadEditor but I have found other editors which seem to (at least attempt to) address this issue:

http://ckeditor.com/forums/Plugins/ImagePaste-plugin-for-Firefox

http://muzso.hu/2012/06/13/how-to-prevent-pasting-of-images-with-a-data-image-uri-scheme-into-tinymce-text-fields

0
Marin Bratanov
Telerik team
answered on 27 Oct 2014, 02:12 PM

Hi guys,

Evaluating the size of the image based on its base64 representation is not entirely possible and in the case of Firefox - it is a browser behavior to convert images to base64 and add them to the content and we do not do this explicitly, so disabling it is more akin to disabling a browser feature. Internet Explorer does not support pasting images at all.

With that in mind, what I can offer is that you disable images pasting like this:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientPasteHtml="OnClientPasteHtml"></telerik:RadEditor>
<script type="text/javascript">
    function OnClientPasteHtml(sender, args) {
        if (args.get_value().indexOf(";base64,") > -1) {
            args.set_cancel(true);
        }
    }
 
    Telerik.Web.UI.Editor.ClipboardImagesProvider.prototype.supportsClipboardData = function () {
    }
</script>

The OnClientPasteHtml event is handled for Firefox and you can see a way to inspect the pasted content (via the get_value() method). You can evaluate if this is a base64 image (the above is a basic sample that should work unless a text string happens to contain the same substring) and prevent pasting in such a case.

You can also examine the source code of the controls and find the supportsClipboardData function (in Editor/Clipboard.js) and examine the event in order to see whether you can evaluate image size there.

Regards,

Marin Bratanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Melissa
Top achievements
Rank 1
answered on 27 Oct 2014, 06:54 PM
There is something I don't understand.
I have the telerik.Web.UI.dll version 2013.1.220.40
In that version, I can copy/paste an  image from IEbrowser directly into the editor but I can't copy/paste an image from a file that is on the local hard drive, opened for example in MS PAINT or any other editor.
I found on your forum that it is a limitation for that version... (except in firefox where effectively it works). 
But I when on the demo site and even when using IE11 it is working.
So I downloaded the last version of the dll (Q3-2014) but I still unable to do it... it still not working
Can you help me and explain me why ? And what do do to solve this issue please ?
Thanks!
0
Marin Bratanov
Telerik team
answered on 28 Oct 2014, 12:23 PM

Hello Melissa,

Copying an image from the machine (copying a file or an image from an image editing/viewing software) and pasting it into an editable field in the browser is, generally, a feature of the browser. In HTML the images is not a binary file like on your machine, but an img element with an src attribute that has to point to, generally, an URL.

With that in mind, when pasting an image copied from the user's machine, Firefox converts it to a base64 string and sets that to the src attribute of the img tag it generates. This is something the browser itself does, so an editable field (or RadEditor) does not know the image originated from the user machine.

In Chrome, there is API that lets us find the image in the clipboard and by using the FileAPI of the browser, convert it to a base64 string and generate an img element, in a similar fashion to Firefox. And we do that.

IE, however, does not offer either of these facilities, so pasting an image from the user's machine is impossible there. I am attaching here a simple editable iframe you can use to test this.

Now, on pasting images copied from the page or an editable field (RadEditor) - it is, again, up to the browser to create the clipboard data and determine whether it will be an img HTML element. So, when pasting, the browser provides the content and we cannot influence it.

If this does not answer your question, please explain the issue you see in more detail (or even better - add a video that shows what you do with one version and not with the other) so we can answer your outstanding queries.


Regards,

Marin Bratanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Johnathan
Top achievements
Rank 1
answered on 08 Dec 2014, 08:09 PM
Hello. I was just seeing if there was a solution to this issue. I found that pasting an image into an editor doesn't work for a user using IE 10, however I'm able to paste an image in IE 11. Any help would be greatly appreciated.
0
Ianko
Telerik team
answered on 11 Dec 2014, 02:55 PM
Hello Johnathan,

As Martin has explained, pasting content into the RadEditor is entirely dependent on the browser and the browser version.

Also, pasting images can be done with multiple approaches, e.g., pasting from MS Word, from file, from browser etc. All these scenarios are actually dependent on the browser and when it comes to images, the RadEditor does not interact with the image data. At all, the RadEditor has a minor interaxction over the clipboard data, mostly, strips invalid content when MS Word content is being pasted and optionally, can remove formatting and stylization.

I can only make assumption from where the image is pasted, although I can assure you that the RadEditor does not explicitly restricts pasting of images under IE10. This is rather a functionality of the browser and the best way to test what the browser does is to paste the same content in a plain editable div element:
<div contenteditable="true" style="width:600px; height:300px; border:1px solid red;"></div>

If you have any further concerns on the matter, please contact us via proper support ticket and provide exact details about the pasted image, i.e., from where it is being pasted.

Regards,
Ianko
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Chakradhar
Top achievements
Rank 1
Veteran
Iron
answered on 05 Mar 2021, 09:24 AM

HI Rumen,

Possible to change the default size of the image after paste it into the rad editor.
Meaning can the image be 50% of the original image by default after paste it into rad editor.

Note: I'm copying from local drive and paste it into rad editor

0
Rumen
Telerik team
answered on 05 Mar 2021, 11:51 AM

Hi Chakradhar,

Please check out my reply at

Default settings of height, width, border color etc. of Images. 

If you want to resize an image pasted from another location in RadEditor, you can attach to the OnClientPasteHtml event of the control, check for the Paste command execution, and update the image dimensions before pasting its tag in the editor's content area, e.g.

<telerik:RadEditor ID="RadEditor1" runat="server" SkinID="Articles" OnClientPasteHtml="OnClientPasteHtml" OnClientCommandExecuting="OnClientCommandExecuting">
    </telerik:RadEditor>
    <script type="text/javascript">
        function OnClientPasteHtml(sender, args) {
            var commandName = args.get_commandName();
            var value = args.get_value();
 
            if (commandName == "Paste") {
 
                alert(value);
                //modify here the image tag and paste in the editor using the args.set_value(value) method
                args.set_value(value);  //set the modified pasted content in the editor
            }
        }
</script>

Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Chakradhar
Top achievements
Rank 1
Veteran
Iron
answered on 09 Mar 2021, 02:22 AM

Thanks Rumen, it solved my problem.

Another request is can i disable  the right click on image which is pasted in rad editor.

i've attached the image when i clicked on rad editor image.

 

 

0
Rumen
Telerik team
answered on 09 Mar 2021, 08:05 AM

Hello,

Yes, you can like this:

RadEditor1.ContextMenus.FindByTagName("P").Enabled = false;

For more information check this article: Disable Context Menu.

Best Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Chakradhar
Top achievements
Rank 1
Veteran
Iron
answered on 27 May 2021, 10:44 AM

Hi Rumen,

Any update on pasting images on Rad editor from MS word in chrome browser,

When i paste images from MS word to rad editor got the pop up msg as below

 

and then images are not being copied over but text is copied over to rad editor.

Any solution for this in chrome browser.

0
Rumen
Telerik team
answered on 27 May 2021, 12:13 PM

Hi Chakradhan,

The solution is to copy only a single image from Word and to paste it into RadEditor.

If you copy both text and an image or multiple images from MS Word and paste in the Editor, the image will not get pasted as expected. This behavior is due to the security policy of the browser.

Instead of reading the image data and loading it as a base64 string to the src attribute of the <img>element, the browser generates an <img> tag which points to the clipboard location of the file on the client machine.

A browser is not allowed to access such a resource, and so it throws an error and the image is not rendered which you can verify in the browser dev tools console, you will see an error such as: "Not allowed to load local resource: <some image path>".

You can read more about this in this StackOverflow thread.

Best Regards,


Rumen
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Chakradhar
Top achievements
Rank 1
Veteran
Iron
commented on 28 May 2021, 11:50 AM

Hi Rumen,
Thanks for the update and i have another issue is when i try copy single image from outlook mail that one fails to copy to rad editor
and another issue is some time in IE unable to read data which i've typed in rad editor.
Please provide me solution for those two issues.
Rumen
Telerik team
commented on 28 May 2021, 12:31 PM

The content area of RadEditor is an editable iframe or editable div depending on the ContentAreaMode property and uses the rich text editing engine of the browser under which it is loaded.

The image paste and conversion to a base64 string is provided by the browser but not by RadEditor. So please try to paste the same content in an editable div/iframe and you'll easily verify if the used browser provides support for that operation or not.

A sample example with an editable div and iframe can be found at http://dojo.telerik.com/@nlazarov/IFIPAR


 

Tags
Editor
Asked by
vikram
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Dustin
Top achievements
Rank 1
hazem
Top achievements
Rank 1
Priyesh
Top achievements
Rank 1
Kyle
Top achievements
Rank 1
Geir Andersen
Top achievements
Rank 1
Anjum
Top achievements
Rank 1
Marin Bratanov
Telerik team
Fabian
Top achievements
Rank 1
Shaun Peet
Top achievements
Rank 2
Melissa
Top achievements
Rank 1
Johnathan
Top achievements
Rank 1
Ianko
Telerik team
Chakradhar
Top achievements
Rank 1
Veteran
Iron
Share this question
or