Output Escaping Rich Text in a Content Query Web Part

If you use a SharePoint (2010) Content Query Web Part to display content from a rich text field, you will end up with escaped HTML. Because it is escaped it is rendered as content on your page, probably not what you would want.

Image may be NSFW.
Clik here to view.

To fix this, you need to edit the ItemStyle.xsl (preferably a custom one, see this post). You would just have to add the following command to the part outputting the HTML:

<xsl:value-of disable-output-escaping="yes" select="$blah"/>

One other thing to watch out for, is when creating summary descriptions from these rich text fields. Say you have this text:

<h1 class=”ms-rteElement-H1″>Cras porta pharetra magna eget consectetur. </h1> <p class=”ms-rteElement-H1″> </p> <p>Etiam eget nibh eu libero dictum congue. Etiam tempor auctor lectus, at porta dolor molestie vitae.</p>

And you want to create a summary of 150 characters with a “Read More” link. You would cut off the output rendering and potentially leave open HTML tags! And that could really screw up the user experience. So another option would be to strip all html from your output. This way you will loose the rich text markup (H1, bolds and so on), but ensure valid html output.

To accomplish this, you would also need to edit the ItemStyle.xsl (again preferably a custom one) and include some kind of HTML stripping function.

<xsl:template name="Functions.RemoveHtml">
    <xsl:param name="String"/>
    <xsl:choose>
      <xsl:when test="contains($String, '&lt;')">
        <xsl:value-of select="substring-before($String, '&lt;')"/>
        <xsl:call-template name="Functions.RemoveHtml">
          <xsl:with-param name="String"
            select="substring-after($String, '&gt;')"/>
        </xsl:call-template>
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="$String"/>
      </xsl:otherwise>
    </xsl:choose>
</xsl:template>

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.