Sunday, December 8, 2019

href=tel issue for international numbers in AEM RTE

Hello Everyone,

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.
  4. <attribute name="href">
     <regexp-list>
      <regexp name="onsiteURL"/>
      <regexp name="offsiteURL"/>
      <regexp name="telURL"/>
     </regexp-list>
    </attribute>
  5. Go to “Day CQ Link Checker Service” and add “tel:” in special Link Prefixes”option.
  6. 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.

Hope it will help you guys !!
Thanks and Happy Learning.

2 comments:

  1. Really awesome and inspiring post. Best thing about your blog is you share things in clear and transparent manner. Very informative blog and Thanks for sharing usefull content. Cordless phones are classified according to the range that they can function in. Capacity of cordless phones is measured in mega hertz. Higher the frequency, larger is its transmitting capacity. best cordless phone

    ReplyDelete