March 29, 2020
Estimated Post Reading Time ~

href=tel issue for international numbers in AEM RTE

RTE is the most used component in AEM. There are always high expectations from this component, but the RTE component has some issues, which are actually not issues,but those features doesn't come with RTE basic behavior and we need to do something to make it work.

1. Handing Custom Protocols (tel:,callto:,emailto:) in Link Href in Rich Text Editor:
Problem Statement: When you want to use a telephone number as a hyperlink and want to call
on the number by clicking on it, you need to use HTML like <a href="tel:1-847-555-5555">
1-847-555-5555</a>RTE is not able to render the same HTML as added in RTE.

Reason: Adding protocols like tel: (or any custom) in anchor tag href attribute, may not be printed as entered in RTE as link checker com.day.cq.rewriter.linkchecker.impl.LinkCheckerImpl and XSS protection com.adobe.granite.xss.impl.HtmlToHtmlContentContext AntiSamy removes unrecognized protocols during component rendering.

Solution: To resolve this issue:
  1. Overlay /libs/cq/xssprotection/config.xml in /apps/cq/xssprotection/config.xml
  2. Add the protocol say : <regexp name="telURL" value="tel:[0-9]+"/>
  3. Add telURL configuration to the accepted list of anchor href.
<attribute name="href">
    <regexp-list>
    <regexp name="onsiteURL"/>    <regexp name="offsiteURL"/>    <regexp name="telURL"/>    </regexp-list>
</attribute>


Go to “Day CQ Link Checker Service” and add “tel:” in the special Link Prefixes” option.


Fig1: Day CQ Link Checker Service

2. Handing International Numbers Link Href in Rich Text Editor :

After doing the above mentioned steps,if I configure tel:12345 in rte it works fine, but when using href=tel for international numbers i.e., href=tel:+61.... AEM removes the link and it start stripping the code.

So need to follow the below step to make it work. 
By default, the RTE supports these protocols in href:http://,https://,ftp://,mailto: To configure an additional protocol, you will have to add the following structure in the RTE at
the same level of the rtePlugins node, The definition of this node will be:

<htmlRules jcr:primaryType="nt:unstructured">
<links
jcr:primaryType="nt:unstructured"
protocols="[http://,https://,ftp://,mailto:,tel:]" />
</htmlRules>

And that's how the issue can be resolved.


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.