Expand my Community achievements bar.

SOLVED

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

Avatar

Level 2

Hi all,

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

 

NaveenT1_1-1728374174919.png

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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;
}

 



Arun Patidar

View solution in original post

5 Replies

Avatar

Correct answer by
Community Advisor

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;
}

 



Arun Patidar

Avatar

Level 2

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?

 

Avatar

Community Advisor

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



Arun Patidar

Avatar

Level 2

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