How to display Anchor icon of plugin RTE on edit mode of page

[NaveenT1]

Hi all,

I have a requirement to display anchor icon on edit mode of page when we have authored anchor tag in RTE.

if we select anchor tag for test keyword anchor icon will be display next to it. Similarly, can we display anchor icon on edit mode of the page?

Help would be much appreciated. Thanks in advance.

[arunpatidar · Accepted solution]

Hi @NaveenT1 
You can use CSS to display the anchor icon in edit mode

https://sourcedcode.com/blog/aem/targeting-css-in-the-editor-html-for-aem-components-for-aemaacs 

.aem-AuthorLayer-Edit a[id]::before {
    content: "\2693";
    margin-left: 5px;
    font-size: 20px;
    padding-top: 10px;
}

[testte53]

that sounds nice!

[NaveenT1]

Thank you @arunpatidar for the response. your solution is working fine but on hover we are getting component name instead of id. Is there a way to get the id and display it on hover?  and also, how are you able to find "\2693" as content value?

[arunpatidar]

Hi @NaveenT1 

you need to check the title attribute, by default title attribute is shown when you hover.

Do you have any custom implemented ? How does anchor tag looks like?

<a id="anchor-tag-id" title="Demo Anchor"></a>

Here is the list of CSS entity : https://www.w3schools.com/cssref/css_entities.php

[NaveenT1]

Thanks @arunpatidar for your response. we are not getting title attribute by default on id is coming. But the issue is now resolved.