Introduction
In the ever-evolving landscape of web development, maintaining compliance with modern standards like HTML5 is crucial. Recently, there was a challenge encountered while working with Sitecore’s Rich Text Editor (RTE), which seemed to revert valid HTML5 syntax to outdated XHTML. This post details the interaction with Sitecore’s technical support and the steps taken to address the issue.
Initial Inquiry
The initial question to Sitecore’s support was straightforward:
“Hi, Is there an HTML5 validation schema available for the Rich Text Editor?”
Sitecore support responded:
“Sitecore 10.2 uses the following HTML5 validation schema by default:
<!-- XHTML SCHEMA FILE
The file name of the schema file that validates XHTML.
Default value: /sitecore/shell/schemas/Sitecore xhtml5.xsd
-->
<setting name="XHtmlSchemaFile" value="/sitecore/shell/schemas/Sitecore xhtml5.xsd" />Identifying the Issues
While the schema in use was identified, there were some practical problems:
We noticed that the html editor is breaking current valid HTML and replacing it with old style HTML or XHTML. The validator should validate to HTML5 and leave correct HTML5 elements and syntax alone. The standard can be found here.
Example 1: The validator is not accepting correct tags. HTML 5 does not need useless self-closing tags.
We had selected all of the content in the Rich Text Editor and applied a link, we expected to see only one <a> tag surrounding the html, instead the XHTML validator created an <a> tag foreach HTML element within the selection.
Example 2: The validator is not accepting correct tags. HTML 5 does not need useless self closing tags. They are still allowed in HTML5 but should not cause a validation error because:
- It hides actual errors within the source code.
- It confuses less experienced editors that don’t know what is actually correct.
What can we do to handle those scenarios?”
Scope and Investigation
Sitecore support responded by defining the scope of the issue and the course of action:
“Based on the provided information, we have defined the issue regarding the validation schema for the Rich Text Editor. Our investigation reveals that it is not currently possible to switch validation from XHTML to HTML5 in Sitecore CM. We have requested this feature for future Sitecore versions.
For now, we have investigated alternative solutions. The Rich Text Editor is built on Telerik’s RadEditor, which includes a “Filter” functionality to correct HTML. Some filters are enabled by default in Sitecore, resulting in auto-formatting of HTML.
For example, excluding the ConvertToXhtml filter from the default filters will achieve the behavior you need. Here’s how you can do it:
- Backup the file
{Your Sitecore's webroot folder}\sitecore\shell\Controls\Rich Text Editor\EditorPage.aspx. - Open the file and locate the “ContentFilters” attribute of the “telerik” tag.
- Modify the attribute’s value to exclude ConvertToXhtml:”RemoveScripts, FixUlBoldItalic, IECleanAnchors, MozEmStrong, ConvertFontToSpan, IndentHTMLContent, EncodeScripts, OptimizeSpans, ConvertCharactersToEntities, ConvertTags, StripCssExpressions, RemoveExtraBreaks”
- Clear your browser cache.
This adjustment will not change the RTE Suggest Fix functionality, as it triggers the FixXHtml pipeline where XHTML validation is applied by the schema specified in /sitecore/shell/schemas/Sitecore xhtml5.xsd.”
Further Testing and Observations
According to Sitecore Support, there is only one alternative for scenario 1.
After implementing the suggested changes, another issue was encountered:
“We’ve tried removing the filter. When I select multiple HTML elements like the video, press the hyperlink manager button, and assign a URL, the anchor tag is added to every HTML element. However, manually adding the anchor tag containing all the HTML elements doesn’t multiply and remains unique. Is that the expected behavior?”
Sitecore support confirmed:
“Yes, you are correct. Using the hyperlink manager to apply an anchor tag will still multiply the anchor tags across different HTML elements. This is the behavior of the RadEditor. Manually applying the anchor tag in the HTML view of the RTE (with the ConvertToXhtml filter removed) will prevent this multiplication.”
Conclusion
While Sitecore’s Rich Text Editor currently defaults to XHTML validation, it is possible to tailor its behavior to better support HTML5 by modifying the editor’s filters. This workaround addresses the immediate needs while awaiting future updates to fully support HTML5 validation.
For anyone facing similar issues, the steps outlined above should help maintain HTML5 compliance in Sitecore’s RTE. Stay tuned for future updates from Sitecore that might natively resolve these concerns.
