Expand my Community achievements bar.

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

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

 

 

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

page footer