Validation error on adding image in Rich-Text field from Experience editor

Validation error on adding image in Rich-Text field from Experience editor 

When we add an image in Rich-Text field through Experience Editor it throws validation error in (Sitecore 8.1 update-1(151207)).

Steps to reproduce:

Add an image in Rich-Text field from Experience Editor

As soon as we save the changes a validation error is thrown in experience editor

In Experience Editor the <img> tag created is,

<img alt="XXX" src="-/media/XXX.ashx?h=111&amp;w=539&amp;hash=CAF8436CA168BC18D2FD5D95597E874E66EDD1DF" style="width: 539px; height: 111px;" />

Open Content Editor

Click on Edit Html -> Click Fix

The Original HTML and Corrected HTML show no difference but if you see the <img> tag / is removed.

<img alt="XXX" src="-/media/XXX.ashx?h=111&amp;w=539&amp;hash=CAF8436CA168BC18D2FD5D95597E874E66EDD1DF" style="width: 539px; height: 111px;" >

/> is removed

After accepting the above changes, it doesn't throw any error in content editor as well as validation error from experience editor is gone.

Solution:

We raised this with Sitecore Support and they reported it as a Bug in Sitecore 8.1 update-1(151207) Thanks to Sitecore support as they provided a patch to resolve this issue.

So the problem appears while decoding the HTML rich text value in System.Net.WebUtility.HtmlDecode method. To let HtmlDecode generate valid output for rich text field apply following patch provided by Sitecore:

1) Backup your \Website\sitecore\shell\client\Sitecore\ExperienceEditor\ExperienceEditor.js

2) Find following code in mentioned ExperienceEditor.js:

encodeHtml: function (htmlSource) {
    htmlSource = htmlSource.replace(/\\/g, '\\\\').replace(/\"/g, "\\\"");
    var encodedHtml = encodeURIComponent(htmlSource);
    return encodedHtml;
},

and replace it with:

encodeHtml: function (htmlSource) {
    htmlSource = htmlSource.replace(/\\/g, '\\\\').replace(/\"/g, "\\\"").replace(/&amp;/g, "&amp;amp;"); // fix 102239
    var encodedHtml = encodeURIComponent(htmlSource);
    return encodedHtml;
},

3) Clear your browser cache. That’s it.

Check by adding image from Experience Editor it wouldn't throw any validation error.

Happy Coding 😊.