Problems with embedded images (img tag data)

[Roland Klug]

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

[Rumen]

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

[Vicenc Masanas]

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?

[Rumen]

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