Search code examples
htmlwebfrontendfreemarker

Freemarker Template return String instead of html element

I am working on Freemarker Template to create one form. I declared two variables using <#local> which will hold anchor tag and button

<#local rightElement = "<a class='set-right' href='${data.url}'>Forgot your password?</a>">

<#local rightButton = "<input type='button' class='js-show-pass btn-toggle-password btn-link' value='Show'>">

I have used this variable to pass to macro which create my form structure. But when I load my page the variable which I pass prints as String on my Form page. I am accessing them as ${rightElement} and ${rightButton} in my macro. But it is printing my anchor tag with double quotes ,making it as string.

I tried multiple ways to eliminate that double quote with no success. Could you please suggest ways to declare anchor tag in variable and use it as html element and not String.

Solution

  • I'm not sure what you mean by "printing my anchor tag with double quotes, making it as string", but my guess is that the HTML that you print gets auto-escaped, and so you literally see the HTML source (with the <-s and all) in the browser, instead of a link or button.

    So, first, assign the values with <#local someName>content</#local> syntax, instead of <#local someName="content">:

    <#local rightElement><a class='set-right' href='${data.url}'>Forgot your password?</a></#local>

<#local rightButton><input type='button' class='js-show-pass btn-toggle-password btn-link' value='Show'></#local>

    This ensures that ${data.url} and such are properly escaped (assuming you do use auto-escaping, and you should), also then you won't have to avoid/escape " or ' inside the string literal, you can use #if and such in constructing the value, etc.

    Then, where you print the HTML value, if you are using the modern version of auto-escaping (try ${.output_format} to see - it should print HTML then, not undefined), you can now just write ${rightElement}, because FreeMarker knows that it's captured HTML, and so needs no more escaping. If you are using the legacy version of auto-escaping (which utilized #escape directive), then you have to write <#noescape>${rightElement}</#noescape>.