Displaying the span id in HTL

[sudeepKonjeti]

I have a requirement I have to display a ID from the text box which I added in the dialog field (rich text) <span class="num"></span> and I am calling it using sling model class and used like this ${practice.Response @ context='html'}  and in Js i have given element.innterhtml it is working if I give it in HTML instead of passing it from the dialog. I was getting <span class="num"></span> as an plain string instead of html element as below so how to achieve this

[DPrakashRaj]

Normally in Java you declare the variable in camel case so my be try using ${practice.response @ context='html'} instead of ${practice.Response @ context='html'}

[konstantyn_diachenko]

Hi @sudeepKonjeti , 

Do you get any result in the HTML document when you use ${practice.Response @ context='html'}? Or is a problem that you can't convert plain text to HTML when you call element.innerHTML? If the problem is in JS, you can use jQuery to work with DOM elements like $(element.innerHTML).

If a problem that you don't have rendered span HTML that you configured in the rich text editor, then see comment from @DPrakashRaj .  

[GabrielMircea]

It sounds like the issue is due to how AEM processes the string when rendered in the HTML template. When using ${practice.Response @ context='html'}, AEM should theoretically output the HTML directly, but in some cases, it might escape it as plain text instead.

To ensure that the HTML is rendered as an actual element rather than a plain string, try to use context='unsafe'. This allows unescaped HTML, but be cautious about using this if there's a possibility of untrusted input.

[sudeepKonjeti]

Hi @GabrielMircea  I tried giving context='unsafe'. But I was getting same as previous. It is giving output as html but not able to recognize the html elements in it.

[GabrielMircea]

Do you have any logic in your sling model for this field? 

In your Sling Model, set the getter method to directly return an unescaped HTML-safe object.

[PRATHYUSHA_VP]

If you want to append <span> tag using HTL from RTE dialog, you need to have custom RTE plugin 

Please find below articles, it could be of some help 

https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html

https://www.bounteous.com/insights/2022/01/06/custom-rich-text-editor-plugins-adobe-experience-manag...

Hope this helps

[kautuk_sahni]

@sudeepKonjeti Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!