Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

'tel' attribute not working in href of anchor tag in rich text editor in classic UI

Avatar

Level 4

I am using AEM 6.1 SP2 , I am trying to enable 'tel' attribute in the href of anchor tag to make the click to call functionality work. I have already added 'htmlRules' node

and links node under htmlRules node with 'protocols' property as [http://, https://, ftp://, tel:, mailto:, file://]

as specified in the link - Configuring Telephone Tags within Rich Text components and the Link Checker | 6D Labs

The 'validateHref' function in rte.js does read the 'protocols' property and validates the 'tel ' attribute as valid, but not sure why the 'tel' attribute does not persist in the markup when 'ok' is clicked in the author dialog.

this is the anchor tag -

<a style="color: #6c6c6c; text-decoration: underline;" class="tel" href="tel:1234 567 891">1234 567 89</a>

and this is how it renders as markup on page -

<a style="color: rgb(108,108,108);text-decoration: underline;" class="tel">1234 567 89</a>

This is the 'htmlRules' node xml -

<htmlRules jcr:primaryType="nt:unstructured">

                            <serializer jcr:primaryType="nt:unstructured">

                                <cleanup jcr:primaryType="nt:unstructured">

                                    <pre

                                        jcr:primaryType="nt:unstructured"

                                        tagsToRemove="[\0]"/>

                                    <post

                                        jcr:primaryType="nt:unstructured"

                                        tagsToRemove="[\0]"/>

                                    <paste

                                        jcr:primaryType="nt:unstructured"

                                        tagsToRemove="[\0]"/>

                                </cleanup>

                            </serializer>

                            <links

                                jcr:primaryType="nt:unstructured"

                                protocols="[http://,https://,ftp://,tel:,mailto:,file://]"/>

</htmlRules>

1 Accepted Solution

Avatar

Correct answer by
Level 4

voteunaccept

This was fixed by adding the 'tel' attribute in the regexp list of xssprotection config file present at /libs/cq/xssprotection/config.xml

<regexp name="telURL" value="tel:[0-9]+"/>  

<attribute name="href">
<regexp-list>
<regexp name="onsiteURL"/>
<regexp name="offsiteURL"/>
<regexp name="telURL"/>
</regexp-list>
</attribute>

This has been described in the blog at

https://experience-aem.blogspot.com.au/2015/05/aem-6-sp2-handling-custom-protocol-in-link-href-in-rt...

Although it has been mentioned in that blog and in other places

Rendering telephone links in HTL based on input from a Rich Text widget

https://forums.adobe.com/thread/2329552

that for sightly the config file is present at -

/libs/sling/xss/config.xml

and not at

/libs/cq/xssprotection/config.xml

and even when I am using a sightly component ,

/libs/wcm/foundation/components/text/text.html

even then, changing the config file at /libs/sling/xss/config.xml did not have any effect, I had to make the changes in /libs/cq/xssprotection/config.xml , when I am using aem 6.1 SP2. Mysterious ways of AEM

View solution in original post

1 Reply

Avatar

Correct answer by
Level 4

voteunaccept

This was fixed by adding the 'tel' attribute in the regexp list of xssprotection config file present at /libs/cq/xssprotection/config.xml

<regexp name="telURL" value="tel:[0-9]+"/>  

<attribute name="href">
<regexp-list>
<regexp name="onsiteURL"/>
<regexp name="offsiteURL"/>
<regexp name="telURL"/>
</regexp-list>
</attribute>

This has been described in the blog at

https://experience-aem.blogspot.com.au/2015/05/aem-6-sp2-handling-custom-protocol-in-link-href-in-rt...

Although it has been mentioned in that blog and in other places

Rendering telephone links in HTL based on input from a Rich Text widget

https://forums.adobe.com/thread/2329552

that for sightly the config file is present at -

/libs/sling/xss/config.xml

and not at

/libs/cq/xssprotection/config.xml

and even when I am using a sightly component ,

/libs/wcm/foundation/components/text/text.html

even then, changing the config file at /libs/sling/xss/config.xml did not have any effect, I had to make the changes in /libs/cq/xssprotection/config.xml , when I am using aem 6.1 SP2. Mysterious ways of AEM