How to add formatting functionality to text field in our component in aem

[Siva_Sogalapalli]

Your question is not clear to me, but if you're exploring options to add formatting features , please explore on RTE which will help on you: 

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/text.htm...

Hope this helps you to understand further.

[vinuu123]

Hi sir, actually I created a component in that i had three fields name as image field, title field and description field, I want description text had alignment like left, right or centered. How can I had formatting property to that description text field. Can you suggest something about this

[Siva_Sogalapalli]

If you wanted to have formatting capabilities, YES you need to suggest Richtext field option. 

when you added richtext type filed, by default you will see some formatting plugins, and more can added /customised based on requirements.

please have a look at this as well so that you can quickly change field resource type on your local and see how it looks like.

https://gist.github.com/mattlo/d9f699e8142e00df99747772f3a486ba 

[vinuu123]

My expectation was to create a tab in the dialog where user can select where the description has to display .. like completely left , middle and right

[Siva_Sogalapalli · Accepted solution]

There is no limitation for that, you can use richtext field where ever you want. 

Please check below example where you can find dialog structure for richtext which is included at tab level:

https://gist.github.com/briankasingli/1a7e3e12deaa2e076645b09d30039b46

[Vijayalakshmi_S]

@vinuu123 

Check if you are looking for something like the below

• Have a select field to capture the description position from content author (Left, right, center as options of select field)
• In HTL, align the description based on the value of above select field via CSS (either class attribute or inline styling)

Sample screenshots :

In HTL, 

<p style="text-align: ${properties.position @ context='styleToken'}">${properties.description ?  properties.description : 'Default Description'}</p>

If it is deviating from your requirement, please elaborate with screenshots if possible.