Allow custom HTML tag to rich text editor

Question

Using Sitecore 9.2, we're working on embedding videos into rich text components, as there aren't enough currently to support a separate rendering at this point. The video is a Brightcove component that is surrounded by a <video-js> tag. It appears to go in fine at first, especially if you use the HTML mode to put the tag in, but if an editor then goes in to edit in the rich text mode, the tag goes missing. Looking behind the scenes at the HTML at that point, it's converted the <video-js> to <video-js%gt; look, making the HTML literal.

My guess is this is because the tag is non-standard and is not passing validation. Is there a way to add the tag to the validator, or just turn off the validator altogether so the tag isn't converted?

Answer 1

I reached out to Sitecore support. They pointed me to /sitecore/shell/Controls/Rich Text Editor/EditorPage.aspx, the ContentFilters setting. It's set to use the "default" entries by default, which if you look at the Telerik sample (https://demos.telerik.com/aspnet-ajax/editor/examples/builtincontentfilters/defaultcs.aspx) is everything on the list except MakeUrlsAbsolute. I found removing the ConvertCharactersToEntities option got this to work, so the final setting would be this:

ContentFilters="RemoveScripts,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent,EncodeScripts,OptimizeSpans,PdfExportFilter,ConvertInlineStylesToAttributes,ConvertTags,StripCssExpressions,StripDomEventAttributes,RemoveExtraBreaks"