Paste image from clipboard in rad editor

33 posts, 0 answers
  1. Marin Bratanov
    Marin Bratanov avatar
    3562 posts

    Posted 28 Oct 2014 Link to this post

    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.


    Marin Bratanov

    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.

  2. Johnathan
    Johnathan avatar
    30 posts
    Member since:
    Sep 2012

    Posted 08 Dec 2014 Link to this post

    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.
  3. DevCraft R3 2016 release webinar banner
  4. Ianko
    Ianko avatar
    1510 posts

    Posted 11 Dec 2014 Link to this post

    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.


    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.

Back to Top