0

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, enter image description here

How am I able to display the HTML formatting?

any advice would be greatly appreciated!

Thanks!

Improve this question

1 Answer 1

Reset to default
4

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

Improve this answer
5
  • thank you very very much, that seems to have done the trick. :) another shot in the dark question, just in case you know, but I noticed that with a single line text field you can limit the number of characters. I dont see the option to do so for a multi-line Rich Text field. You know of a possible way to implement such a thing on the front end?
    – Simon
    Jul 14, 2015 at 8:57
  • 1
    Limiting the characters displayed in a display template or limit the characters in a multiple textbox in sharepoint? The later would be really hard as it generates html as you use it.. with the risk that the closing div tag would go missing, never closing the first tag..
    – Christoffer
    Jul 14, 2015 at 9:23
  • yeah, I tried the approach of 'trimming' the field in the display template, and found that exact issue about cutting off various HTML elements. Didnt work so well, lol. The other option was to try limit in on the actual edit and new forms in the field itself, but after doing some research it seems like its not really possible, unless you're using plain text which goes against the requirement of wanting HTML styling. Not a biggie, will just be a training thing then to the client. :)
    – Simon
    Jul 14, 2015 at 9:29
  • The rich text control in SharePoint is really poor in many aspects and this is one of them.. :) I know that it's possible to trim in a content query web part but that is really old.. :)
    – Christoffer
    Jul 14, 2015 at 10:30
  • Don't truncate the text yourself; use CSS text-overflow:ellipsis
    – Danny '365CSI' Engelman
    Jul 14, 2015 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.