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

Problems with embedded images (img tag data)

3 Answers 96 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Roland Klug
Top achievements
Rank 1
Roland Klug asked on 19 Apr 2011, 03:02 PM
Hello Telerik,

I use the RadEditor control to display html pages with embedded images, like so:

<img width="436" height="184" alt="" id="Bild_x0020_1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg" />

This works fine as long as the image is small (enough). When it gets larger, the data seems to be truncated, so that the image becomes invalid. Note that the resulting html code is not truncated, only the value of the source attribute is truncated.

Is there any limitation in the size of embedded images? How can I override any limitation?

Thanks for your appreciated help!
Roland

3 Answers, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 19 Apr 2011, 03:57 PM
Hi Roland,

RadEditor does not limit the src size of the embedded images and the problem is browser related.

I found the following information which could be helpful:

There are size limitations for inline images. Browsers are only required to support URLs up to 1,024 bytes in length, according to the above RFC. Browsers are more liberal in what they'll accept, however. Opera limits data URLs to about 4,100 characters. Firefox supports data URLs up to 100K, so this technique is best used for small, decorative images. In summary:

  • IE 5-7 does not support
  • More steps to update embedded content (reencode, reembed)
  • Length limits - technique is useful for smaller, decorative images
  • Base64 encoded images are roughly 33% larger than their binary equivalent

The source article is http://www.websiteoptimization.com/speed/tweak/inline-images/

Kind regards,
Rumen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Vicenc Masanas
Top achievements
Rank 1
answered on 28 Jan 2019, 12:54 PM

Is there any setting to prevent users copy/pasting images directly into the editor? If they do this the image is automatically converted to base64 and saved to the DB as part of the text. This increases the size of the DB to much for our scenarios.

Is there a way to prevent this directly from the editor configuration?

0
Rumen
Telerik team
answered on 28 Jan 2019, 01:00 PM
Hi Vicenc,

Yes, you can use the OnClientPasteHtml client event to filter the images and strip them:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml">
</telerik:RadEditor>
  
<script type="text/javascript">
    Telerik.Web.UI.Editor.ClipboardImagesProvider.prototype.supportsClipboardData = function (event) {
        return false;
    }
  
  
    function OnClientPasteHtml(editor, args) {
        var value = args.get_value();
        var strippedContent = value.replace(/\<img .+?\>/ig, "");
  
        var confirmStripping = confirm("Do you want to strip the images?");
        if (confirmStripping) {
            args.set_value(strippedContent);
        }
    }
</script>

You can check this forum thread for more information: Prevent images to be pasted in Radeditor.

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Editor
Asked by
Roland Klug
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Vicenc Masanas
Top achievements
Rank 1
Share this question
or