Paste image from clipboard in rad editor

33 posts, 0 answers
  1. vikram
    vikram avatar
    11 posts
    Member since:
    Oct 2008

    Posted 29 Jan 2009 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 02 Feb 2009 Link to this post

    Hello Vikram,

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dustin
    Dustin avatar
    5 posts
    Member since:
    Aug 2010

    Posted 01 Sep 2010 Link to this post

    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?
  5. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 02 Sep 2010 Link to this post

    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
  6. hazem
    hazem avatar
    2 posts
    Member since:
    Mar 2011

    Posted 23 Mar 2011 Link to this post

    Is there an update for pasting images in IE 9?
  7. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 24 Mar 2011 Link to this post

    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
  8. Priyesh
    Priyesh avatar
    5 posts
    Member since:
    Mar 2011

    Posted 14 Oct 2011 Link to this post

    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
  9. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 14 Oct 2011 Link to this post

    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
  10. Priyesh
    Priyesh avatar
    5 posts
    Member since:
    Mar 2011

    Posted 14 Oct 2011 Link to this post

    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
  11. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 14 Oct 2011 Link to this post

    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
  12. Kyle
    Kyle avatar
    3 posts
    Member since:
    Jan 2012

    Posted 15 Feb 2012 Link to this post

    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
  13. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 16 Feb 2012 Link to this post

    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 >>
  14. Geir Andersen
    Geir Andersen avatar
    2 posts
    Member since:
    Feb 2006

    Posted 07 Mar 2012 Link to this post

    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? 
     
  15. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 08 Mar 2012 Link to this post

    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.
  16. Geir Andersen
    Geir Andersen avatar
    2 posts
    Member since:
    Feb 2006

    Posted 22 Mar 2012 Link to this post

    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 
  17. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 22 Mar 2012 Link to this post

    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.
  18. Priyesh
    Priyesh avatar
    5 posts
    Member since:
    Mar 2011

    Posted 05 Jun 2012 Link to this post

    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.
  19. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 05 Jun 2012 Link to this post

    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.
  20. Priyesh
    Priyesh avatar
    5 posts
    Member since:
    Mar 2011

    Posted 05 Jun 2012 Link to this post

    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
  21. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 06 Jun 2012 Link to this post

    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.
  22. Priyesh
    Priyesh avatar
    5 posts
    Member since:
    Mar 2011

    Posted 06 Jun 2012 Link to this post

    Hi Rumen,

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

    Thanks,
    Priyesh
  23. Anjum
    Anjum avatar
    3 posts
    Member since:
    Aug 2010

    Posted 24 May 2013 Link to this post

    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.
  24. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 28 May 2013 Link to this post

    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.
  25. Fabian
    Fabian avatar
    1 posts
    Member since:
    Jun 2013

    Posted 07 Jun 2013 Link to this post

    I Don't know  how can you do that  I need to Know that too
  26. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 12 Jun 2013 Link to this post

    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.
  27. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 24 Oct 2014 in reply to Marin Bratanov Link to this post

    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).
  28. Kyle
    Kyle avatar
    3 posts
    Member since:
    Jan 2012

    Posted 24 Oct 2014 in reply to Shaun Peet Link to this post

    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...
  29. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 24 Oct 2014 Link to this post

    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

  30. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 27 Oct 2014 Link to this post

    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.

     
  31. Melissa
    Melissa avatar
    1 posts
    Member since:
    Oct 2014

    Posted 27 Oct 2014 in reply to Marin Bratanov Link to this post

    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!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017