How to display html tags in jcr fields?

[mpalme1]

I have several type:String fields in the jcr that contain html tags in them. I need to render on my page such that the html tags are injected into the dom rather than be escaped. But right now, they are getting escaped.

For example, in the jcr I might have this field

In the browser, that is ending up like this:

<p>&lt;p&gt;Texting with your feet is a rare skill.&lt;/p&gt;</p>

I don't know if this is relevant to my question, but the jcr fields I'm trying to render are in the /jcr:content/data/master of a content fragment and get populated from entry to a multi-line field in a content fragment model. I have the ContentFragment in my custom component java code, so for all the single-line text fields on that model, the following approach works fine for me.

Custom component java code:

	@Override
	public String getTitle() {
		ContentElement titleElement = pageContentFragment.getElement("article-title");
		return titleElement.getContent();
	}

Custom component htl:

 <section
 	data-sly-use.article="com.ab.mysite.core.models.Article" 
 	data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html" 
 	class="article-style" tabindex="0">	
		<h1>${article.title}</h1>
 </section>

However, for those multi-line text fields, the same approach results in escaped html that actually causes the html tags to be displayed on the page.

How can I use my component code to prevent AEM from escaping the html for these specific fields?

[Vaibhavi_J · Accepted solution]

Hi @mpalme1 

To display html tags in HTL add context ='html' while printing the value. 

In your scenario ${article.title @ context='html'} should fix the issue. 

[mpalme1]

Thank you! That worked.

[Ravi_Pampana]

Hi,

Using context in htl we can display the text in different ways

https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/expression-language.html

Context Settings

Context

When to use

What it does

text	Default for content inside elements	Encodes all HTML special characters.
html	To safely output markup	Filters HTML to meet the AntiSamy policy rules, removing what doesn't match the rules.
attribute	Default for attribute values	Encodes all HTML special characters.
uri	To display links and paths Default for href and src attribute values	Validates URI for writing as an href or src attribute value, outputs nothing if validation fails.
number	To display numbers	Validates URI for containing an integer, outputs zero if validation fails.
attributeName	Default for data-sly-attribute when setting attribute names	Validates the attribute name, outputs nothing if validation fails.
elementName	Default for data-sly-element	Validates the element name, outputs nothing if validation fails.
scriptToken	For JS identifiers, literal numbers, or literal strings	Validates the JavaScript token, outputs nothing if validation fails.
scriptString	Within JS strings	Encodes characters that would break out of the string.
scriptComment	Within JS comments	Validates the JavaScript comment, outputs nothing if validation fails.
styleToken	For CSS identifiers, numbers, dimensions, strings, hex colours or functions.	Validates the CSS token, outputs nothing if validation fails.
styleString	Within CSS strings	Encodes characters that would break out of the string.
styleComment	Within CSS comments	Validates the CSS comment, outputs nothing if validation fails.
unsafe	Only if none of the above does the job	Disables escaping and XSS protection completely.