Adding Anchor Sprite Image to Custom RTE Plugin | Community
Skip to main content
benbakos
Level 2
Dec 7, 2022 8:49 PM UTC
Solved

Adding Anchor Sprite Image to Custom RTE Plugin

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

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
arunpatidar
arunpatidarAccepted solution
New Participant
Dec 9, 2022 9:56 AM UTC

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/aemlab/oneweb/clientlibs/author/clientlib-editdragable 

 

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 reply

4 replies

arunpatidar
arunpatidar
New Participant
Dec 8, 2022 9:15 AM UTC

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

 

 

Translate
Arun Patidar
    benbakosAuthor
    Level 2
    Dec 8, 2022 9:47 PM UTC

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

     

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

    Translate
      arunpatidar
      arunpatidarAccepted solution
      New Participant
      Dec 9, 2022 9:56 AM UTC

      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/aemlab/oneweb/clientlibs/author/clientlib-editdragable 

       

      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

      Translate
      Arun Patidar
        SantoshSai
        SantoshSai
        New Participant
        Dec 7, 2022 10:17 PM UTC

        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

        Translate
        Santosh Sai
          Terms & ConditionsAccessibility statement

          Loading footer...