display HTML styling to a div using content templates and JS

Question

I am busy working on creating a 'new and announcements' web part for a client using a 'News' list, a content search on a New content type, and displaying it using a display template and javascript.

In my 'News' list I have a 'short description' field which is a rich text editor. In this field I want the user's to be able to use HTML formatting and styling.

In the display template file, i am getting the value using -

var shortDescription = $getItemValue(ctx, "NewsItemShortDescription");

I am then outputting it with -

<div id="trimmedDetailsDiv" class="newsListItemBody" style="padding-right: 0px; color:#656565; font-size:15px; padding-bottom: 25px;">
    _#=shortDescription=#_
</div>

However, on the front end, im seeing the following,

How am I able to display the HTML formatting?

any advice would be greatly appreciated!

Thanks!

Answer 1

You need to render the rich text. Just add STSHtmlDecode like in this example.

<div id="trimmedDetailsDiv" class="newsListItemBody" style="padding-right: 0px; color:#656565; font-size:15px; padding-bottom: 25px;">
    _#= STSHtmlDecode(shortDescription.value) =#_
</div>

SharePoint 2013 - Working with Display Template for Content Search Web Part

SharePoint Display Templates – Display Enhanced Rich Text Field

When i was working with display templates, this site helped me out a lot.

Useful JavaScript to know when working with SharePoint Display Templates