How to customize paraformat plugin in aem

[Mario248]

I need to customize paraformat plugin in aem. for example I want to add class attribute to h1,h2,h3,p tag. Below is the OOTB behaviour 

<h1>Out-of-the-box (OOTB) plugins and their features cover many text editing use cases, but there will always be a need for customization.</h1>

I want to have to class attribute something like below

<h1 class="xyz">Out-of-the-box (OOTB) plugins and their features cover many text editing use cases, but there will always be a need for customization.</h1>

 Is it possible to add class attribute without making any code change. for example I tried to add property in dialog like 

but it is not picked. I guess there is no JS logic to read "class" property hence I tried to find a JS file and make a modification and I found plugin js - /libs/clientlibs/granite/coralui2/optional/rte/js/core/plugins/ParagraphFormatPlugin.js but here I dont see any place or logic to add class attribute. 

Ref - https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/administering/operati...

[arunpatidar]

HI @Mario248 
This is not possible OOTB, but you need a custom plugin to achieve this, below are some examples

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

https://experience-aem.blogspot.com/2018/01/aem-631-touch-ui-rich-text-editor-alphabetical-ordered-l... 

[Mario248]

Thanks for your response. I am planing create a custom plugin by extending "CUI.rte.plugins.ParagraphFormatPlugin" by referring "/libs/clientlibs/granite/coralui2/optional/rte/js/core/plugins/ParagraphFormatPlugin.js" but here I could not find the HTML markup code or HTML rendering logic. Do you have any idea where is it located ? maybe different file altogether?  

[MukeshYadav_]

Hi @Mario248 ,

If you just want to add a class attribute to the selected text. You may refer step mentioned here. This way selected text will be wrapped up in a span with specified class.

https://medium.com/@anshulag_/add-custom-styles-to-an-rte-field-in-aem-adobe-experience-manager-with....

Thanks