Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to display html tags in jcr fields?

Avatar

Level 3

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

mpalme1_0-1592573070733.png

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?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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. 

 

 

 

 

 

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

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. 

 

 

 

 

 

Avatar

Community Advisor

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.