Adding Anchor Sprite Image to Custom RTE Plugin

[benbakos]

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

[SantoshSai]

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

[arunpatidar]

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: '⚓';
}

[benbakos]

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

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

[arunpatidar · Accepted solution]

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