38 Answers, 1 is accepted
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.
Rank 1
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?
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
Rank 1
IE9 still does not support pasting images from the clipboard. However, this feature was officially introduced in Firefox 4.
Greetings,
Rumen
the Telerik team
Rank 1
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
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
Rank 1
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
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
Rank 1
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
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
Rank 1
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?
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
Rank 1
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
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
Rank 1
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.
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
Rank 1
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
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
Rank 1
It overcame the problem. Now I am getting the reference properly.
Thanks,
Priyesh
Rank 1
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.
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
Rank 1
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
Rank 2
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).
Rank 1
Rank 2
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
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,
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.
Rank 1
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!
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,
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.
Rank 1
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.
Rank 1
Veteran
Iron
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
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/.
Rank 1
Veteran
Iron
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.
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/.
Rank 1
Veteran
Iron
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.
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.
Rank 1
Veteran
Iron
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.
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.
Actually i added the below content security policy in application after adding it is not allowing me to paste image in telerik control.
<add name="Content-Security-Policy" value="default-src 'self'; img-src https://betadash.intelligrated.com https://ontimeparts.com https://aspnet-skins.telerikstatic.com https://www.google-analytics.com https://ssl.google-analytics.com https://cdn.cookielaw.org 'self' data:"/>
Please find the attached image
Hi Payal,
it's necessary to include 'unsafe-inline' and 'unsafe-eval' for the proper functioning of Telerik AJAX controls and the ASP.NET Web Forms framework. As explained in the Content Security Policy Mode article the minimal CSP configuration for running Telerik UI for ASP.NET AJAX is:
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' ;" />Using Telerik UI for ASP.NET AJAX with CDN over HTTPS (SSL)
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://d2i2wahzwrm1n5.cloudfront.net ; style-src 'self' 'unsafe-inline' https://d35islomi5rx1v.cloudfront.net ; font-src 'self' https://d35islomi5rx1v.cloudfront.net 'data:'; img-src 'self' https://d35islomi5rx1v.cloudfront.net 'data:'" />It's important to note that a Strict Content Security Policy is not supported due to incompatibility with the MS AJAX client-side library in the ASP.NET Web Forms framework. This framework, which our Telerik AJAX controls are built upon, relies on certain functions like setTimeout(), setInterval(), inline scripts, and eval().
Given that Telerik AJAX controls are dependent on the MS AJAX framework, they share similar limitations. Unfortunately, there's no foreseeable version of our controls that will address this issue. Microsoft's shift in focus away from Web Forms, mainly to security updates, further complicates this matter.
However, for Telerik UI for ASP.NET MVC and Telerik UI for ASP.NET Core, the use of 'unsafe-eval' is no longer required as of the R1 2023 release. Additionally, as of the R3 2023 release, 'unsafe-inline' in the "style-src" directive won't be necessary, except for specific components like the Editor, ResponsivePanel, GridLayout, and StackLayout:
I hope this information is helpful for your decision-making process. Please don't hesitate to reach out if you have any further questions.
No With mentioned changes are not working for me .
Please check the custom header in asp.net application.
<add name="Content-Security-Policy" value="default-src 'self' https://ontimeparts.com https://googletagmanager.com https://fonts.gstatic.com https://geolocation.onetrust.com https://honeywell-privacy.my.onetrust.com https://eubanner.honeywell.com 'unsafe-inline' 'unsafe-eval';script-src-elem 'self' https://www.googletagmanager.com https://cdn.cookielaw.org https://www.google-analytics.com https://ssl.google-analytics.com 'unsafe-inline' 'unsafe-eval';connect-src https://www.google-analytics.com https://geolocation.onetrust.com https://cdn.cookielaw.org https://honeywell-privacy.my.onetrust.com https://betaDash.intelligrated.com https://stats.g.doubleclick.net ;script-src 'self' 'unsafe-inline' 'unsafe-eval';style-src 'self' 'unsafe-inline';img-src https://BetaDash.intelligrated.com https://ontimeparts.com https://aspnet-skins.telerikstatic.com https://www.google-analytics.com https://ssl.google-analytics.com https://cdn.cookielaw.org 'unsafe-inline' 'unsafe-eval' 'self' data: "/>
I tested the provided CSP policy configuration and noticed the following error in the DevTools console:
Default.aspx:1 Refused to load the image 'blob:http://localhost:56467/1ea9abae-4533-4f42-a753-8a65186c91fe' because it violates the following Content Security Policy directive: "img-src https://BetaDash.intelligrated.com https://ontimeparts.com https://aspnet-skins.telerikstatic.com https://www.google-analytics.com https://ssl.google-analytics.com https://cdn.cookielaw.org 'unsafe-inline' 'unsafe-eval' 'self' data:".
The error message indicates that an image loaded from a blob URL (a URL representing data in memory, often used for pasted or uploaded content) is being blocked by the Content Security Policy (CSP) because it violates the img-src directive.
To allow pasting images from your PC to the localhost page, you should add 'blob:' to the img-src directive in your CSP to allow blob URLs. Here's the updated CSP directive:
<system.webServer> <httpProtocol> <customHeaders> <add name="Content-Security-Policy" value="default-src 'self' https://ontimeparts.com https://googletagmanager.com https://fonts.gstatic.com https://geolocation.onetrust.com https://honeywell-privacy.my.onetrust.com https://eubanner.honeywell.com 'unsafe-inline' 'unsafe-eval'; script-src-elem 'self' https://www.googletagmanager.com https://cdn.cookielaw.org https://www.google-analytics.com https://ssl.google-analytics.com 'unsafe-inline' 'unsafe-eval'; connect-src https://www.google-analytics.com https://geolocation.onetrust.com https://cdn.cookielaw.org https://honeywell-privacy.my.onetrust.com https://betaDash.intelligrated.com https://stats.g.doubleclick.net; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src https://BetaDash.intelligrated.com https://ontimeparts.com https://aspnet-skins.telerikstatic.com https://www.google-analytics.com https://ssl.google-analytics.com https://cdn.cookielaw.org 'unsafe-inline' 'unsafe-eval' 'self' data: blob:;" /> </customHeaders> </httpProtocol>Test and if the error persists, send the DevTools console error for review.
Since https://aspnet-skins.telerikstatic.com applies to the HTTP CDN of Telerik, you may also need to add the HTTPS Telerik-specific CDN URL to the list of allowed domains
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://d2i2wahzwrm1n5.cloudfront.net ; style-src 'self' 'unsafe-inline' https://d35islomi5rx1v.cloudfront.net ;It is working for me in QA environment.
I asked user to test. Thanks for quick response.