Expand my Community achievements bar.

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

Adding Anchor Sprite Image to Custom RTE Plugin

Avatar

Level 2

Good afternoon,

 

I have implemented the Custom RTE Plugin from this article into my local AEM instance.

 

I was wondering if it was possible to add the anchor sprite image in the screenshot below when a new attribute is added using the plugin

 

benbakos_0-1670446138642.png

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Example of sample clientlibs which will load for all the components without adding to dialog

https://github.com/arunpatidar02/aemaacs-aemlab/tree/master/ui.apps/src/main/content/jcr_root/apps/a... 

 

you can copy this and put in your project inside ui.apps and update draggable.css css or create your own css and add to css.txt



Arun Patidar

View solution in original post

4 Replies

Avatar

Community Advisor

Hi @benbakos ,

If you are looking to have plugin icon please refer to the blog published by @arunpatidar 

here: https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html

Also, worth checking this too: https://mkbansal.wordpress.com/2016/01/09/aem-rte-custom-styles-plugin-touch-ui/

Hope that helps!

Regards,

Santosh

Avatar

Community Advisor

Hi,

I would say, add a CSS to the RTE dialog, either using extraclientlibs or externalStyleSheets property of RTE.

with CSS you can inject icon based on attribute

example,

I have added an icon if span element has style attribute

.cq-RichText-editable.coral-RichText-editable.coral-RichText.coral-DecoratedTextfield-input span[style]::before {
    content: '';
}

arunpatidar_0-1670490920847.png

 

 



Arun Patidar

Avatar

Level 2

Thanks for the suggestion @arunpatidar. I will give this a try.

 

Where exactly in CRX would I put this clientlib/external stylesheet?

Avatar

Correct answer by
Community Advisor

Example of sample clientlibs which will load for all the components without adding to dialog

https://github.com/arunpatidar02/aemaacs-aemlab/tree/master/ui.apps/src/main/content/jcr_root/apps/a... 

 

you can copy this and put in your project inside ui.apps and update draggable.css css or create your own css and add to css.txt



Arun Patidar