Troublesome HR's and the RTE

I recently came across a (yet another) IE7 annoyance. If you try and style a HR tag with a background image it is seemingly impossible to avoid the border around the image in IE7. After scouring the web I came across a solution that solves the problem and retains the HR tag (I reckon that is the best solution from a semantic point of view).

So how do I go about having Sitecore’s Rich Text Editor insert HR’s like this:

<div class="hr"><hr /></div>

There are two obvious solutions:

Add the above code as a HTML snippet in the RTE or
Rely on the RTE to insert plain HR tags and then replace HR tags in the fieldRenderer pipeline.

I chose to explore the 2nd option as I’m skeptical about editors adding HTML snippets.

First I did the CSS to handle div.hr>hr as suggested in previously mentioned article. The I created a class to handle the string replacement:

namespace Herskind.Processors
{
    public class RichTextFixes
    {
        public void Process(RenderFieldArgs args)
        {
            switch (args.FieldTypeKey)
            {
                case "rich text":
                    {
                        args.Result.FirstPart = ReplaceHRs(args.Result.FirstPart);
                        args.Result.LastPart = ReplaceHRs(args.Result.LastPart);
                        break;
                    }
            }
        }

        private string ReplaceHRs(string text)
        {
            text = text.Replace("<hr>", "<hr/>");
            text = text.Replace("<hr/>", "<hr />");
            return text.Replace("<hr />", "<div class=\"hr\"><hr/></div>");
        }
    }
}

I know that there might be a more elegant way of doing the replacement, but for illustration purposes this will do.

And added it as the last step of the _renderField _pipeline by creating a configuration include file (ie. website/App_Config/Include/RteFix.config):

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <pipelines>
      <renderField>
        <processor type="Herskind.Processor.RichTextFixes, Herskind" />
      </renderField>
    </pipelines>
  </sitecore>
</configuration>

Note: The processor type consists of to pieces of information. The fully expended class name (basically the namespace + the class name) followed by the name of the assembly.

Now the editors can insert plain HR’s in the RTE and when the field is rendered using <sc:text /> all hr tags are enclosed in the <div class”hr”/>.

About the author